css3新特性---（border，Background部分）

boder属性新特性：

border-radius		设置或检索对象使用圆角边框
border-top-left-radius		设置或检索对象左上角圆角边框
border-top-right-radius		设置或检索对象右上角圆角边框
border-bottom-right-radius		设置或检索对象右下角圆角边框
border-bottom-left-radius		设置或检索对象左下角圆角边框
box-shadow		设置或检索对象阴影
border-image		设置或检索对象的边框样式使用图像来填充
border-image-source		设置或检索对象的边框是否用图像定义样式或图像来源路径
border-image-slice		设置或检索对象的边框背景图的分割方式
border-image-width		设置或检索对象的边框厚度
border-image-outset		设置或检索对象的边框背景图的扩展
border-image-repeat		设置或检索对象的边框图像的平铺方式

border-image：设置或检索对象的边框样式使用图像来填充

<' border-image-source '>：设置或检索对象的边框是否用图像定义样式或图像来源路径。

<' border-image-slice '>：设置或检索对象的边框背景图的分割方式。

<' border-image-width '>：设置或检索对象的边框厚度。

<' border-image-outset '>：设置或检索对象的边框背景图的扩展。

<' border-image-repeat '>：设置或检索对象的边框图像的平铺方式。

[border-radius 圆角]

1、border-radius可以接收8个属性值,分别表示：

X轴(左上、右上、右下、左下角)/Y轴(左上、右上、右下、左下角)

eg: border-radius:10px 20px 30px 40px/10px 20px 30px 40px

2、缩写形式：

只写X轴，Y轴将默认等于X轴；

四个角写不全，默认对角相等；

只写一个值，默认8个数均等；

eg: border-radius:50px 20px;

= border-radius:50px 20px 50px 20px;

= border-radius:50px 20px 50px 20px/50px 20px 50px 20px;

3、当圆角弧度>=正方形边长一半，将会显示为圆形。

[border-image 图片边框]

* 1、border-image:一共可以放10个属性值：

① 图片的路径： url();

② 图片的切片宽度： 4个值，分别代表上、右、下、左四条边；

通过4条切线切割，可以将图片分为9宫格。 9宫格四个角分别对应边框的四个角(不会进行任何拉伸)，9宫格四个边分别对应四条边框(会根据设置进行拉伸/铺完/重复等操作)

注意：写的时候，必须不能带px单位！！！！

③ 边框的宽度： 4个值，分别代表上、右、下、左四条边框的宽度；

注意：写的时候，必须带px单位，与切片宽度用/分隔！！！

④ 边框的重复方式： stretch(拉伸)、round(铺满)、repeat(重复)

[round和repeat的区别]

round: 会对四条边进行适当的拉伸压缩，确保四条边可以重复整数次；

repeat：会保持每条边的长度比例不变，可能导致四角处，无法显示一条完整的边；

2、属性值写法： border-image: ① ②/③px ④;

3、 border-image在webkit内核的浏览器中，必须带-webkit-前缀。

[box-shadow 盒子阴影]

1、 6个属性值，空格分隔：

① x轴阴影距离(必选): 可正可负，正——右移，负——左移；

② y轴阴影距离(必选): 可正可负，正——下移，负——上移；

③ 阴影模糊半径(可选)：只能为正，默认为0.数值越大，阴影越模糊；

④ 阴影扩展半径(可选)：可正可负，默认为0.数值增大，阴影扩大；数值减小，阴影缩小；

⑤ 阴影颜色(可选)：默认为黑色

⑥ 内外阴影(可选)：默认为外阴影。 inset表示内阴影；

background新增属性

background-origin		设置或检索对象的背景图像显示的原点
background-clip		检索或设置对象的背景向外裁剪的区域
background-size		检索或设置对象的背景图像的尺寸大小

background-size：背景图的大小
[指定宽度高度]
宽度高度的指定，可以写px，也可以写%(父容器宽高的百分比)
当写两个属性时，分别表示宽度、高度；
当写一个属性时，表示宽度，高度将会等比缩放；

其他属性值]
contain: 图片等比缩放，直到宽或高中较大的一边缩放到100%为止。(可能导致较短的一边<100%,图片无法盖住全部区域)
cover：图片等比缩放，直到宽或高中较小的一边缩放到100%为止。(可能导致较大的一边>100%,图片超出区域显示不全)

background-origin

设置或检索对象的背景图像计算 <' background-position '> 时的参考原点(位置)。

对应的脚本特性为backgroundOrigin。

padding-box：从padding区域（含padding）开始显示背景图像

border-box：从border区域（含border）开始显示背景图像。

content-box：从content区域开始显示背景图像。

巴特西

css3新特性---（border，Background部分）

最新文章

热门文章