div的css样式之border

最新推荐文章于 2024-04-25 18:36:27 发布

summer_sun_tree

最新推荐文章于 2024-04-25 18:36:27 发布

阅读量1.7k

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/weixin_45637488/article/details/115407970

版权

边框border样式一共有三要素：

width：是用来定边框厚度的。
style：边框样式，一些样式如下

solid实线
dotted点状
double双线
dashed虚线

color：设定边框颜色

其中宽度和颜色可以省略，有默认值。

如果设置好了div盒子的长宽，设置了border有一定厚度的时候，是会向外扩张的，整个盒子看起来都变大了。四边三要素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: blue;
        }
        .test2{
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <div class='test1'></div>
    <div class='test2'></div>
</body>
</html>

可以看到，两个盒子已经不一样大了，因为有border的5px。

设置样式的方法多种多样，以下是定义单边三要素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: black; }    
            /* 定义单边的三要素，上右下左顺时针的顺序 */
        .test1
            {
            border-top: 5px solid blue;
            border-right: 10px dashed green;
            border-bottom: 15px dotted yellow;
            border-left: 20px double pink;
        }
        .test2{
            margin-top: 5px;
        }         
             
    </style>
</head>
<body>
    <div class='test1'></div>
    <div class='test2'></div>
</body>
</html>

单边单要素（top，right，bottom，left）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: black; }    
        
        .test1
            {
            border-top-width: 5px;
            border-top-style: solid;
            border-top-color: blue;

            border-right-width: 5px;
            border-right-style: solid;
            border-right-color: blue;
        }
        .test2{
            margin-top: 5px;
        }         
             
    </style>
</head>
<body>
    <div class='test1'></div>
    <div class='test2'></div>
</body>
</html>

四边单要素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: black; }    
        
        .test1
            {
            border-width: 5px 10px 15px 20px;
            border-style:solid dashed dotted double;
            border-color: blue purple green pink;
        }
        .test2{
            margin-top: 5px;
        }         
             
    </style>
</head>
<body>
    <div class='test1'></div>
    <div class='test2'></div>
</body>
</html>

虽然分类搞得很细，然而说白了就是四条边（三要素）分开设置还是放在一起设置的问题，没有必要过多纠结。用的时候只要知道怎么写就好！

summer_sun_tree

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
div的css样式之border

边框border样式一共有三要素：width：是用来定边框厚度的。 style：边框样式，一些样式如下solid实线 dotted点状 double双线 dashed虚线color：设定边框颜色其中宽度和颜色可以省略，有默认值。如果设置好了div盒子的长宽，设置了border有一定厚度的时候，是会向外扩张的，整个盒子看起来都变大了。四边三要素 <!DOCTYPE html><html lang="en"><head> <me
复制链接

扫一扫