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

轮廓:

  • 属性名: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半轴

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值