03.盒模型-边框

2022-06-11 09:00:23 阅读：151 来源： 互联网

标签：03 color 模型边框 width 10px solid border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: #bfa;

            /* 
                边框
                    边框的宽度 border-width
                    边框的颜色 border-color
                    边框的样式 border-style                    
            */ 
            border-width:10px;
            /* 
                可以不写，则默认值一般都是3个像素 
                border-width可以用来指定四个方向的边框的宽度
                    值的情况
                        四个值：上 右 下 左（顺时针）
                        border-width:10px 20px 30px 40px
                        三个值：上 左右 下
                        border-width:10px 20px 30px
                        两个值：上下 左右
                        ……
                        一个值：上下左右
                        ……
                
                除了border-width还有一组border-xxx-width
                    xxx可以是top right bottom left
                    用来单独指定某一个边的宽度
                    border-top-width:10px;
            */

            /* 
                border-color用来指定边框的颜色，同样可以分别指定四个边的边框
                    规则和border-width一样
                    例如：border-color:orange red yellow green;

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

            /* 
                border-style 指定边框的样式
                    solid 表示实线
                    dotted 点状虚线
                    dashed 线状虚线
                    double 双线

                border-style的默认值是none 表示没有边框                
            */
            border-style:solid;
            
            /* 
                border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
            
                除了border以外，还有四个 border-xxx(top,right,bottom,left)       
            */
            border:10px orange solid;


            /* 实际应用： */
            border-top:10px solid red;
            border-left:10px solid red;
            border-bottom:10px solid red;
            /* 或者 */
            border:10px solid red;
            border-right:none;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

标签：03,color,模型,边框,width,10px,solid,border
来源： https://www.cnblogs.com/sherryyuan/p/16365235.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

03.盒模型-边框