零基础学习CSS(13)——边框设置

最新推荐文章于 2024-08-25 04:02:20 发布

原创最新推荐文章于 2024-08-25 04:02:20 发布 · 669 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #css

零基础学习Web开发专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了使用CSS定义网页元素边框的各种方法，包括不同样式的边框、边框宽度和颜色的设置、边框角度的调整以及如何利用图像作为边框等。

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

设置边框样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>边框的各种样式</title>
    <style type="text/css">
        /*定义边框的各种样式*/
        p.none {border-style: none;}
        p.solid {border-style: solid;}
        p.dashed {border-style: dashed;}
        p.dotted {border-style: dotted;}
        p.double {border-style: double;}
        p.groove {border-style: groove;}
        p.ridge {border-style: ridge;}
        p.inset {border-style: inset;}
        p.outset {border-style: outset;}
        p.hidden {border-style: hidden;}
    </style>
</head>
<body>
    <p class="none">没有边框</p>
    <p class="solid">实线边框</p>
    <p class="dashed">虚线边框</p>
    <p class="dotted">圆点边框</p>
    <p class="double">双线边框</p>
    <p class="groove">3D槽线边框</p>
    <p class="ridge">3D脊线边框</p>
    <p class="inset">3D内凹边框</p>
    <p class="outset">3D外凸边框</p>
    <p class="hidden">隐藏边框</p>
</body>
</html>

定义边框的宽度和颜色（同样可以简写）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>边框的各种样式</title>
    <style type="text/css">
        /* 定义边框的宽度和颜色 */
        p {
            border: solid 30px lime;
            font-size: 45px;
        }
    </style>
</head>
<body>
    <p class="solid">实线边框</p>
</body>
</html>

定义每条边框的样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>边框的各种样式</title>
    <style type="text/css">
        /* 定义边框的宽度和颜色 */
        p {
            border-style: dotted solid dotted solid;  /* 按顺序简写：顶边、右边、底边、左边 */
            /* border-style: dotted solid;  也可以按上下、左右简写，同样效果 */
            /* 输入三个值简写：顶、左右、底 */
        }
    </style>
</head>
<body>
    <p class="solid">定义每条边框的样式</p>
</body>
</html>

定义边框角度：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>边框的各种样式</title>
    <style type="text/css">
        /* 定义边框弧度 */
        p {
            border-radius: 15px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <p class="solid">定义每条边框的样式</p>
</body>
</html>

用图像定义边框：