CSS3学习系列之背景相关样式（一）
- 新增属性：
background-clip:指定背景的显示范围
background-origin：指定绘制背景图像时的起点
background-size：指定背景中图像的尺寸
background-break：指定内联元素的背景图像进行平铺时的循环方式
- background-clip属性
在HTML页面中，一个具有背景的元素通常由元素的内容、内容补白（padding）、边框、外部补白（margin）构成。
元素背景的显示范围在css2与css2.1、css3中的并不相同，在css2中，背景的显示范围是指内部补白之内的范围，不包括边框；而在css2.1至css3中，背景的显示范围是指包括边框在内的范围，在css3中，可以使用background-clip来修改背景的显示范围，如果将background-clip的属性值设定为border，则背景范围包括边框区域，如果设定为padding则不包括边框区域。例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两种background-clip属性值的对比示例</title> <style> div { background-color: black; border: dashed 15px green; padding: 30px; color: white; font-size: 30px; font-weight: bold; margin: 50px 0; } div.div1 { -moz-background-clip: border; -webkit-background-clip: border; background-clip: border; } div.div2 { -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding; } </style> </head> <body> <div id="div1"> 示例 </div> <div id="div2"> 示例里 </div> </body> </html>
（有出入）
- background-origin属性
在绘制背景图像时，默认是从内部补白（padding）区域的左上角开始，但是可以利用background-origin属性来指定绘制时从边框的左上角开始，或者从内容的左上角开始。
例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-origin属性使用示例</title> <style> div { background-color: black; border: dashed 15px green; padding: 30px; color: white;; font-size: 2em; font-weight: bold; } div.div1 { -moz-background-origin: border; -webkit-background-origin: border; background-origin: border-box; } div.div2 { -moz-background-origin: padding; -webkit-background-origin: padding; background-origin: padding-box; } div.div3 { -moz-background-origin: content; -webkit-background-origin: content; background-origin: content-box; } </style> </head> <body> <div id="div1"> 示例 </div> <div id="div2"> 示例里 </div> <div id="div3"> 示例里示例里 </div> </body> </html>
- background-size属性
在css3中，可以使用background-size属性来指定背景图像的尺寸，例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-size属性的使用示例</title> <style> div{ background-color: black; background-image: url(flower-red.png); padding:30px; color:white; font-size:2em; font-weight: bold; background-size: 40px 20px; -webkit-background-size: 40px 20px; } </style> </head> <body> <div> 示例 </div> </body> </html>
- background-break属性
将background-break属性指定为bounding-box的时候，背景图像在整个内联元素中进行平铺，指定为each-box的时候，背景图像在每一行中进行平铺，指定为continuous的时候，下一行中的图像紧接着上一行中的图像继续平铺，例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-break属性的使用示例</title> <style> span{ background-color: #888888; background-image: url(flower-green.png); padding: 0.2em; color:gray; line-height: 1.5; font-size: 1em; font-weight: bold; } div.div1 span{ -moz-background-inline-policy:bouding-box; } div.div2 span{ -moz-background-inline-policy:each-box; } div.div3 span{ -moz-background-inline-policy:continuous; } </style> </head> <body> <div class="div1"> 示例 </div> <div class="div2"> 示例 </div> <div class="div3"> 示例 </div> </body> </html>
- 在一个元素中显示多个背景图像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在一个元素中显示多个背景图像的示例</title> <style> div{ background-image: url(flower-red.png),url(flower-green.png),url(sky.jpg); background-repeat: no-repeat,repeat-x,no-repeat; background-position: 3% 98%, 85%,conter conter,top; width:300px; padding: 90px 0px; } </style> </head> <body> <div></div> </body> </html>
- border-radius属性
在css3中，只要使用border-radius属性指定好圆角的半径，就可以绘制圆角边框了。例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制圆角边框示例</title> <style> div{ border:solid 5px blue; border-radius:20px; -moz-border-radius: 20px; -o-border-radius:20px; -webkit-border-radius: 20px; background-color: skyblue; padding: 20px; width: 180px; } </style> </head> <body> <div>文字问文字问文字问文字问文字问文字问文字问</div> </body> </html>
