css3笔记04--背景+边框

CSS3–背景+边框

多个背景图片

1	background：[background-image]\|[background-origin]\|[background-clip]\|[background-repeat]\|[background-size]\|[background-position]

[background-origin]：指定背景的原点位置，属于新增的属性
[background-clip]：指定 背景的显示区域
[background-repeat]：背景图像是否重排
[background-size]：指定而背景图片的大小
[background-position]：背景图像位置

如果定义多重背景图，则用逗号隔开各个背景图。

比如：

1
2
3

background：url（.../images/1.png) 120px 110px no-repeat,
            url（.../images/2.png) 400px 10px no-repeat,
            url（.../images/3.png) no-repeat;

写在前面的背景图像会显示在上面，写在后面的图像背景会显示在下面。
也可以改写成：

1
2
3

background-image：url（.../images/1.png)，url（.../images/2.png)，url（.../images/3.png)；
background-position：120px 110px，400px 10px，0 0；
background-repeat：no-repeat,no-repeat,no-repeat；

背景的原点位置

用新增的background-origin来指定背景图像的原点位置。在默认情况下，background-position总是以元素边框以内的左上角为坐标原点进行背景图像定位。使用background-origin属性可以对该原点位置进行调整。

background-origin：border-box|padding-box|content-box
border-box：原点位置为边框（border）区域的开始位置（默认值）
padding-box：原点位置为内边距（padding）区域的开始位置
content-box：原点位置为内容（content）区域的开始位置

考虑兼容性，要加前缀

border-box

1
2
3

-webikit-background-origin：border-box；
-moz-background-origin：border-box；
background-origin：border-box；

padding-box

1
2
3

-webikit-background-origin：padding-box；
-moz-background-origin：padding-box；
background-origin：padding-box；

content-box

1
2
3

-webikit-background-origin：content-box；
-moz-background-origin：content-box；
background-origin：content-box；

指定背景的显示区域

background-clip用来指定北京的显示区域。在CSS3下，背景的显示区域是包含元素边框在内的。

background-clip：border-box|padding-box|content-box
border-box：背景从边框开始显示
padding-box：背景从内边距开始显示
content-box：背景从内容区域开始显示

使用方式和background-origin相似，考虑兼容性需要添加前缀

指定背景元素大小

用background-size属性来指定背景大小

background-size：[<length>|<percentage>|auto]{1,2}|cover|contain

length：长度值，不可为负值
percentage：0%~100%之间的值，是基于背景图像的父元素的百分比
cover：保持背景图像本身的宽高比例，将图像缩放到正好完全覆盖适应所定义的背景区域
contain：保持背景图像本身的宽高比例，将图像缩放到正好适应所定义的背景区域
cover和contain的区别：使用这两个属性的时候，图像都采用了缩放，不同的是，cover，背景图像按比例缩放，直至覆盖整个背景区域，但可能会裁剪掉部分图像。当属性为content时候，背景图像会完全显示出来，但可能不会完全覆盖背景区域。

border-radius

1
2
3

border-radius：none|<length>{1,4}
none:默认值，没有圆角
< length>：不可为负值。分为两组，每组有1–4个值，第一组为水平半径，第二组为垂直半径，如果第二组省略，则默认等于第一组的值

派生子属性

border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-left-radius：左下角
border-bottom-right-radius：右下角

如果有空缺的值的话，以顺时针方向来填满。

两组半径的圆角

可以同时指定两组半径值：第一组的值表示圆角的水平半径，第二组的值表示圆角的垂直半径。通常用该方式来画椭圆。第一组的值和第二组的值用/隔开。

1	border-radius：20px/40px；

此时的边框圆角每个都是1/4的椭圆

border-radius的派生子属性不能用两组半径的方式来赋值

border-image

在CSS3之前，图像不能直接用于边框。border-image属性专门用来做边框图像处理
定义属性都跟border-radius相同，不过是把radius换成image而已

border-image-source：定义图片的资源
border-image-slice：定义图像的切片，设置图像的边界向内的偏移长度
border-image-repeat：重复
border-image-width：宽度
border-image-outset：偏移位置

需要用兼容加前缀的方式来实现

border-color

可以加颜色和透明度
派生的子属性也同上述几种情况

要想设计一个圆形边框，只用border-radius：50% 50%