首页 > 代码库 > ccs3新特性---(border,Background部分)

ccs3新特性---(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 圆角]

        * 1border-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 图片边框]

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

        *    ① 图片的路径: url();

        *

        *    ② 图片的切片宽度: 4个值,分别代表上、右、下、左四条边;

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

        *      注意:写的时候,必须不能带px单位!!!!

        *

        *    ③ 边框的宽度: 4个值,分别代表上、右、下、左四条边框的宽度;

        *      注意:写的时候,必须带px单位,与切片宽度用/分隔!!!

        *

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

        *      [roundrepeat的区别]

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

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

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

        *

        * 3 border-imagewebkit内核的浏览器中,必须带-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区域开始显示背景图像。

 

ccs3新特性---(border,Background部分)