盒子模型轮廓，阴影，圆角

浅浅的花香味﹌ 2022-09-02 04:26 228阅读 0赞

# 轮廓： #

*  属性名：outline
 *  属性值：宽度 颜色 样式
 *  与border类似，不同点：outline不会影响到其他元素
 *      .out{
                    width: 100px;
                    height: 100px;
                    background:#bfa;
                    outline: 10px grey solid;
                }
    
    ![20210730153344931.png][]
    
    #  #

# 阴影： #

*  属性名：box-shadow
 *  属性值：向右/左偏移（+-），向下/上偏移，模糊值，阴影颜色
 *      box-shadow:9px 19px 3px rgba(0, 0,0,0.2);
 *  ![20210730154051885.png][]

# 圆角： #

*  组合属性名：border-radius
 *  四个角单独属性名：

border-top-left-radius:左上 ;
               border-top-right-radius: 右上;
               border-bottom-right-radius:右下 ;
               border-bottom-left-radius: 左下;

*  单独属性值：一个：圆角半径；两个椭圆：x半轴，y半轴
 *  组合属性值：特点：对称
    
    <table style="width:500px;"> 
     <tbody> 
      <tr> 
       <td style="text-align:center;">一个</td> 
       <td style="text-align:center;">四个角</td> 
      </tr> 
      <tr> 
       <td style="text-align:center;">两个</td> 
       <td style="text-align:center;">左上+右下&nbsp; &nbsp;右上+左下</td> 
      </tr> 
      <tr> 
       <td style="text-align:center;">三个</td> 
       <td style="text-align:center;">左上+右下 右上 左下</td> 
      </tr> 
      <tr> 
       <td style="text-align:center;">四个</td> 
       <td style="text-align:center;">左上 右上 右下 左上</td> 
      </tr> 
     </tbody> 
    </table>
 *  组合属性值需要椭圆角时，用/区分x半轴，y半轴

[20210730153344931.png]: /images/20220829/482392c257da42ceb00658835906f441.png
[20210730154051885.png]: /images/20220829/2a1c4c69d224445b9bfa6987850775a1.png