css-边框属性

来源：互联网发布：windows 搜索功能坏了编辑：程序博客网时间：2024/06/05 04:57

一、边框属性：环绕在标签宽度和高度周围的线条
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>

阅读全文

0 0