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

轮廓:

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

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

 阴影:

  • 属性名:box-shadow
  • 属性值:向右/左偏移(+-),向下/上偏移,模糊值,阴影颜色
  •  box-shadow:9px 19px 3px rgba(0, 0,0,0.2);
  • 盒子模型轮廓,阴影,圆角 

 圆角:

  • 组合属性名:border-radius
  • 四个角单独属性名:
           border-top-left-radius:左上 ;
           border-top-right-radius: 右上;
           border-bottom-right-radius:右下 ;
           border-bottom-left-radius: 左下;
  • 单独属性值:一个:圆角半径;两个椭圆:x半轴,y半轴
  • 组合属性值:特点:对称
    一个 四个角
    两个 左上+右下   右上+左下
    三个 左上+右下 右上 左下
    四个 左上 右上 右下 左上
  • 组合属性值需要椭圆角时,用/区分x半轴,y半轴

上一篇:Python之路【第十七篇】:Django之【进阶篇】


下一篇:设置圆角头像