css边框

最新推荐文章于 2024-04-10 13:08:54 发布

拜拜雪公主zz

最新推荐文章于 2024-04-10 13:08:54 发布

阅读量154

点赞数

分类专栏：前端css笔记文章标签： css

本文链接：https://blog.csdn.net/qq_46152483/article/details/119114800

版权

前端css笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

css边框

1.什么是边框：就是环绕在标签宽度和高度周围的线条
2.边框属性的格式

2.1
连写（同时设置四条边的边框）
border：边框的宽度边框的样式边框的颜色
快捷键： bd+
连写格式中颜色可以省略，省略是黑色，样式不能省略，宽度可以省略
2.2
连写(分别设置四条边的边框)
border-top：边框的宽度边框的样式边框的颜色
border-right：边框的宽度边框的样式边框的颜色
border-bottom：边框的宽度边框的样式边框的颜色
border-left：边框的宽度边框的样式边框的颜色
2.3
连写（分别设置四条边的边框）
border-width:上右下左
border-style:上右下左
border-color:上右下左
注意点：赋值是按上右下左顺时针来赋值
取值省略时：省略上边，则上下相同
省略左边，则左右相同
只赋值一个，则全都相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框属性</title>
    
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
           /* border:5px solid pink; */
            /*border-top: 10px solid yellow;
            border-right: 10px solid skyblue;
            border-bottom: 10px solid purple;
            border-left: 10px solid greenyellow;*/
            border-width: 10px 20px 20px 10px;
            border-style: solid dotted dotted solid;
            border-color: yellow;

        }
    </style>
</head>
<body>
<div class="box"></div>

</body>
</html>

在这里插入图片描述