注册登录

Web全栈-盒模型-边框属性 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框属性上</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            /*border: 5px solid blue;*/
            /*border: 5px solid;*/
            /*border: 5px blue;*/
            /*border: solid blue;*/

            border-top:5px solid blue;
            border-right:10px dashed green;
            border-bottom:15px dotted purple;
            border-left:20px double pink;
        }
    </style>
</head>
<body>
<!--
1.什么边框?
边框就是环绕在标签宽度和高度周围的线条

2.边框属性的格式
2.1连写(同时设置四条边的边框)
border: 边框的宽度 边框的样式 边框的颜色;

快捷键:
bd+ border: 1px solid #000;

注意点:
1.连写格式中颜色属性可以省略, 省略之后默认就是黑色
2.连写格式中样式不能省略, 省略之后就看不到边框了
3.连写格式中宽度可以省略, 省略之后还是可以看到边框

2.2连写(分别设置四条边的边框)
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;

快捷键:
bt+ border-top: 1px solid #000;
br+
bb+
bl+
-->
<div class="box"></div>
</body>
</html>
知识兔
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>边框属性下</title>    <style>        .box{            width: 500px;            height: 500px;            background-color: red;            /*border-width: 5px 10px 15px 20px;*/            /*border-style: solid dashed dotted double;*/            /*border-color: blue green purple pink;*/            /*border-color: blue green purple;*/            /*border-color: blue green;*/            /*border-color: blue;*/            border-top-width: 5px;            border-top-style: solid;            border-top-color: blue;            border-right-width: 10px;            border-right-style: dashed;            border-right-color: green;            border-bottom-width: 15px;            border-bottom-style: dotted;            border-bottom-color: purple;            border-left-width: 20px;            border-left-style: double;            border-left-color: pink;        }    </style></head><body><!--2.3连写(分别设置四条边的边框)border-width: 上 右 下 左;border-style: 上 右 下 左;border-color: 上 右 下 左;注意点:1.这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右2.这三个属性的取值省略时的规律2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样2.3上 右 下 左 > 上 > 右下左边取值和上边一样3.非连写(方向+要素)border-left-width: 20px;border-left-style: double;border-left-color: pink;--><div class="box"></div></body></html>
计算机