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

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

轮廓：

  • 属性名：outline
  • 属性值：宽度 颜色 样式
  • 与border类似，不同点：outline不会影响到其他元素

  • .out{

    1.         width: 100px;
    2.         height: 100px;
    3.         background:#bfa;
    4.         outline: 10px grey solid;
    5.     }

    20210730153344931.png

    #

阴影：

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

圆角：

  • 组合属性名：border-radius

  • 四个角单独属性名：

    border-top-left-radius:左上 ;

    1.        border-top-right-radius: 右上;
    2.        border-bottom-right-radius:右下 ;
    3.        border-bottom-left-radius: 左下;

  • 单独属性值：一个：圆角半径；两个椭圆：x半轴，y半轴

  • 组合属性值：特点：对称




















    一个 四个角
    两个 左上+右下   右上+左下
    三个 左上+右下 右上 左下
    四个 左上 右上 右下 左上
  • 组合属性值需要椭圆角时，用/区分x半轴，y半轴

发表评论

表情：
评论列表 （有 0 条评论，312人围观）

还没有评论，来说两句吧...

相关阅读