盒子模型--边框

最新推荐文章于 2024-08-05 20:08:54 发布

不好意思，此人不存在

最新推荐文章于 2024-08-05 20:08:54 发布

阅读量187

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_44278908/article/details/113834985

版权

盒子模型–边框

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bbffaa;

            /* 
              边框
                  边框的宽度 border-width
                      默认值，一般都是3个像素  
                      border-width可以用来指定四个方向的边框的宽度
                        值的情况
                          四个值：上 右 下 左
                          三个值：上 左右（值相等） 下
                          两个值：上下（值相等） 左右（值相等）
                          一个值：上下左右（四个值相等）
                    除了border-width还有一组 border-×××-width
                        ×××可以是  top（上） right（右） bottom（下） left（左）
                        用来单独指定某一个边的宽度

                  边框的颜色 border-color
                  边框的样式 border-style
             */
             /* border-width: 10px 20px 30px 40px; */
             /* border-top-width: 10px; 
              border-left-width: 30px; */
             /* 
               border-color用来指定边框的颜色，同样可以分别指定四个变的边框
                    规则和border-width一样

                border-color也可以省略不写，如果省略则自动使用color的颜色值
              */

             /* border-color: orange red yellow green; */

             /* 
                border-style 指定边框的样式  默认值是none表示没有边框
                     solid 表示实线
                     dotted 表示点状虚线
                     dashed 表示虚线
                     double 表示双线
              */
             /* border-style: solid; */

             /* 
                border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
                
                除了border意外还有四个 border-×××
                    border-top
                    border-right
                    border-bottom
                    border-left

              */
              /* border: solid 10px orange; */
              border: orange solid 10px;
              border-right: none;
        
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述

不好意思，此人不存在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
盒子模型--边框

盒子模型–边框<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{
复制链接

扫一扫