非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.4 盒子模型-边框border

不念不忘少年蓝@ 2024-03-25 23:54 45阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  10 CSS盒子模型
         *   *  10.4 盒子模型-边框border
             *   *  10.4.1 边框 - border
                 *  10.4.2 设置边框的方式
                 *  10.4.3 边框的样式设置值
                 *  10.4.4 同时设置的方式
                 *  10.4.5 圆角 – border-radius
                 *  10.4.6 border-radius补充

![在这里插入图片描述][d5a2d31aa13b451b9582cb793285103a.png_pic_center]

#### 一 HTML+CSS ####

#### 10 CSS盒子模型 ####

##### 10.4 盒子模型-边框border #####

###### 10.4.1 边框 - border ######

border用于设置盒子的边框:

![在这里插入图片描述][4d37c576ee6d408ab2b5df26ae71795c.png_pic_center]

边框相对于content/padding/margin来说特殊一些:

*  边框具备宽度width;
 *  边框具备样式style;
 *  边框具备颜色color;

###### 10.4.2 设置边框的方式 ######

*  边框宽度
    
     *  border-top-width、border-right-width、border-bottom-width、border-left-width
     *  border-width是上面4个属性的简写属性
 *  边框颜色
    
     *  border-top-color、border-right-color、border-bottom-color、border-left-color
     *  border-color是上面4个属性的简写属性
 *  边框样式
    
     *  border-top-style、border-right-style、border-bottom-style、border-left-style
     *  border-style是上面4个属性的简写属性

###### 10.4.3 边框的样式设置值 ######

边框的样式有很多, 我们可以了解如下的几个:

*  groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
 *  ridge：山脊, 和grove相反，边框看上去好象是从画布中凸出来

![在这里插入图片描述][8b0f748a979b4da6bbd204cbc82e7154.png_pic_center]

<!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>
        .box {
          
          display: inline-block;
    
          width: 300px;
          height: 300px;
    
          /* width */
          /* border-top-width: 10px;
          border-right-width: 20px;
          border-bottom-width: 30px;
          border-left-width: 40px; */
          /* border-width: 10px 20px 30px 40px; */
    
          /* style */
          /* border-top-style: solid;
          border-right-style: dashed;
          border-bottom-style: groove;
          border-left-style: ridge; */
          /* border-style: solid dashed groove ridge; */
    
          /* color */
          /* border-top-color: red;
          border-right-color: blue;
          border-bottom-color: green;
          border-left-color: orange; */
          /* border-color: red blue green orange; */
    
          /* 总缩写属性 */
          border: 10px solid red;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box">我是box</div>
    
    </body>
    
    </html>

![在这里插入图片描述][ea007983d69f483e901b6dfac3cc9e48.png_pic_center]

###### 10.4.4 同时设置的方式 ######

*  如果我们相对某一边同时设置 宽度 样式 颜色, 可以进行如下设置:
    
     *  border-top
     *  border-right
     *  border-bottom
     *  border-left
     *  border：统一设置4个方向的边框
 *  边框颜色、宽度、样式的编写顺序任意

![在这里插入图片描述][8cbbb9e34963450ba76239ca3c71866c.png_pic_center]

###### 10.4.5 圆角 – border-radius ######

border-radius用于设置盒子的圆角

![在这里插入图片描述][d32f7ee7320e4a92ab66dd1d81fe6f30.png_pic_center]

border-radius常见的值:

*  数值: 通常用来设置小的圆角, 比如6px;
 *  百分比: 通常用来设置一定的弧度或者圆形;

###### 10.4.6 border-radius补充 ######

*  border-radius事实上是一个缩写属性:
    
     *  将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottomleft-radius 简写为一个属性。
     *  开发中比较少见一个个圆角设置;
 *  如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆.

<!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>
        div {
          
          width: 180px;
          height: 100px;
          background-color: #f00;
    
          border: 10px solid green;
        }
    
        .box {
          
          /* 设置圆角 */
          /* 设置具体的数值 */
          /* border-radius: 20px; */
          /* 设置百分比 */
          /* 百分比相对于谁, 了解即可 */
          border-radius: 10%;
        }
    
        .content {
          
          border-radius: 20px;
        }
    
        .home {
          
          width: 100px;
          height: 100px;
          border: 10px solid red;
          background-color: #0f0;
    
          border-radius: 50%;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box"></div>
      <div class="content"></div>
    
    
      <div class="home"></div>
    
    </body>
    
    </html>

![在这里插入图片描述][60986bc2cfa240e5b528fca6a65b9fc4.png_pic_center]

[d5a2d31aa13b451b9582cb793285103a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3301a6e2ac90404cb693fda355d053d5.png
[4d37c576ee6d408ab2b5df26ae71795c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/91a89d54e98d42049bc58b7052b49745.png
[8b0f748a979b4da6bbd204cbc82e7154.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/91e0f4e689ec46e39c063dbb0a45b451.png
[ea007983d69f483e901b6dfac3cc9e48.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/59cd6006e6764fc2adf7def5ae56c0d5.png
[8cbbb9e34963450ba76239ca3c71866c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/446b5bba8dfa41b6ace7b9556dbcb204.png
[d32f7ee7320e4a92ab66dd1d81fe6f30.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b2e81a8cf3f14f1a89563faf6de00808.png
[60986bc2cfa240e5b528fca6a65b9fc4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3310d3c063c44d50bff08946b5fa98ed.png