盒子新特性:

盒子阴影  box-shadow

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

属性:box-shadow         作用:设定一个盒子的阴影效果

形式:  box-shadow: 水平偏移值   垂直偏移值   [模糊值]  [外延值]  [颜色] [inset]

说明:

 1. 至少设置两个长度值,分别表示阴影的水平偏移量和垂直偏移量,可以为负。

2.  模糊值是设定阴影的模糊效果的宽度,可以不设置,则默认值为0,

3.  外延值是设定阴影再"扩大"的宽度,可以不设置,则默认为0

4. insert表示设置"内阴影",可以不设置,则默认为外阴影。

二.  圆角边框 border-radius

        属性:  border-radius   用于设定一个盒子的圆角特性

        形式:border-radius:  水平圆角半径[/垂直圆角半径]

        说明:半径设置可以提供四个值,垂直半径可以省略

三.  图像边框   border-image

       主要属性: 

        border-image-source : 设置作为边框背景的图片源。

        border-image-slice: 设置要将边框背景图片进行"切割"的分割方式。不带单位,1-4个值

        border-image-width  设置图片边框的宽度,也可以设定1-4个值,通常设定为auto

        border-image-repeat: 设置边框背景的填充方式,可以设定2个值,表示横向和纵向

四: 背景新特性

        background-attachment : 设置背景图像的滚动属性特性   

       scroll(相对盒子固定)    local(内容滚动)   fixed(浏览器固定)

        background-origin:  设置背景图像的参考原点(位置)   border-box  padding-box  centent-box

       background-clip:  border-box  padding-box   centent-box

       background-size: 值1,值2

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄