css-边框属性

最新推荐文章于 2022-07-13 15:29:06 发布

vivianlisunny

最新推荐文章于 2022-07-13 15:29:06 发布

阅读量232

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/vivianlisunny/article/details/74885643

版权

HTML5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、边框属性：环绕在标签宽度和高度周围的线条
1、边框属性的格式
1.1、连写(同时设置四条变的边框)
border:边框的宽度边框的样式边框的颜色；
快捷键：bg+ border: 1px solid #000;
注意点：连写格式中颜色可以省略，省略后默认黑色；
连写格式中样式不能省略，省略后几句看不到边框了
连写格式中宽度可以省略，省略后仍能看见边框

1.2、连写(分别设置四条变的边框)
border-top：边框的宽度边框的样式边框的颜色；
border-bottom：边框的宽度边框的样式边框的颜色；
border-left：边框的宽度边框的样式边框的颜色；
border-right：边框的宽度边框的样式边框的颜色；

1.3、连写(按要素分别设置四条变的边框)
border-width：上右下左
border-style：上右下左
border-color：上右下左
注意点：赋值顺序是上右下左；
这三个属性的取值省略规律：
1、省略左：左边的取值和右边一样
2、省略下左：左边的取值和右边一样，下边的取值和上边一样
3、省略右下左：右下左取值和上边一样
例如：
border-style:solid dotted double dashed;

1.4、非连写(方向+要素)
例如：

border-top-width:5px;
border-top-style:solid;
border-top-color: red;

小练习

<head>
    <meta charset="UTF-8">
    <title>小练习</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            border: 5px solid black;
        }
        .box2{
            border-top:5px solid red;
            border-right: 5px solid green;
            border-bottom: 5px solid blue;
            border-left: 5px solid purple;
        }
        .box3{
            border: 5px solid red;
            border-right: 5px dashed red;
        }
        .box4{
            border: 5px solid red;
            border-style: solid dashed;
        }
        .box5{
            border: 5px solid black;
            border-bottom:none;
        }
        .box6{
            width: 0px;
            height: 0px;
            border-width: 25px;
            border-style: solid;
            border-color: red white white white;
            border-bottom:none;     
        }
    </style>
</head>

<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
<hr>
<div class="box3"></div>
<hr>
<div class="box4"></div>
<hr>
<div class="box5"></div>
<hr>
<div class="box6"></div>
</body>

vivianlisunny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-边框属性

一、边框属性：环绕在标签宽度和高度周围的线条 1、边框属性的格式 1.1、连写(同时设置四条变的边框) border:边框的宽度边框的样式边框的颜色；快捷键：bg+ border: 1px solid #000; 注意点：连写格式中颜色可以省略，省略后默认黑色；连写格式中样式不能省略，省略后几句看不到边框了连写格式中宽度可以
复制链接

扫一扫