新增屬性
background-clip:指定背景的顯示範圍(FF:-moz-background-clip,其他:-webkit-background-clip)
background-origin:指定繪製背景圖像時起點(FF:-moz-background-origin,其他:-webkit-background-origin)
background-size:指定背景中圖像尺寸(其他:-webkit-background-size,其他:-webkit-background-size)
background-break:指定內聯元素的背景圖像進行平鋪時的循環方式(FF:-moz-background-inline-policy)
1.指定背景顯示範圍 background-clip屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
background-color:Red;
border:dashed 15px green;
padding:30px;
margin-bottom:20px;
}
#div1{
-moz-background-clip:border;
-webkit-background-clip:border;
}
#div2{
-moz-background-clip:padding;
-webkit-background-clip:padding;
}
</style>
</head>
<body>
<div id="div1">哈羅1</div>
<div id="div2">哈羅2</div>
</body>
</html>
2.指定背景圖像的繪製起點 background-origin屬性
background-origin:border; 邊框左上角
background-origin:padding; 內部補白區域左上角
background-origin:content; 內容的左上角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
background-color:Red;
background-image:url(test.png);
background-repeat:no-repeat;
border:dashed 15px green;
padding:30px;
margin-bottom:20px;
}
#div1{
-moz-background-origin:border;
-webkit-background-origin:border;
}
#div2{
-moz-background-origin:padding;
-webkit-background-origin:padding;
}
#div3{
-moz-background-origin:content;
-webkit-background-origin:content;
}
</style>
</head>
<body>
<div id="div1">哈羅1</div>
<div id="div2">哈羅2</div>
<div id="div3">哈羅3</div>
</body>
</html>
3.指定背景圖像尺寸 background-size屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
background-color:Red;
background-image:url(test.png);
border:dashed 15px green;
padding:30px;
background-size:70px 20px;
/* 設置為auto可按比例自適應 */
/*background-size:40px auto;*/
-webkit-background-size:70px 20px;
}
</style>
</head>
<body>
<div>哈羅1</div>
</body>
</html>
4.指定內聯元素背景圖像進行平鋪時的循環方式 background-break屬性
可指定bounding-box(背景圖像在整個內聯元素中平鋪),each-box(背景圖像在每一行中平鋪),continuous(下一行中圖像緊接上一行圖像平鋪)這3種循環方式,目前僅有FF瀏覽器支持
注:本人沒在FF試出來
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
background-color:#888888;
background-image:url(test.png);
padding:0.2em;
line-height:1.5;
font-size:1em;
font-weight:bold;
}
#div1 span{
-moz-background-inline-policy:bounding-box;
}
#div2 span{
-moz-background-inline-policy:each-box;
}
#div3 span{
-moz-background-inline-policy:continuous;
}
</style>
</head>
<body>
<div id="div1">
<span>哈羅哈羅哈羅哈羅哈羅哈羅哈羅<br />哈羅哈羅哈羅哈羅哈羅哈羅</span>
</div>
<div id="div2">
<span>哈羅哈羅哈羅哈羅哈羅哈羅哈羅<br />哈羅哈羅哈羅哈羅哈羅哈羅</span>
</div>
<div id="div3">
<span>哈羅哈羅哈羅哈羅哈羅哈羅哈羅<br />哈羅哈羅哈羅哈羅哈羅哈羅</span>
</div>
</body>
</html>
在一個元素中顯示多個背景圖像
CSS3可在一個元素中顯示多個背景圖像,可將多個背景圖像重疊顯示
使用background-image屬性指定圖像文件,第一個圖像文件放最上,最後指定的文件放最下
允許多重指定并配合多個圖像文件一起利用的屬性有如下:
1.background-image
2.background-repeat
3.background-position
4.background-clip
5.background-origin
6.background-size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
background-image:url(test.png),url(test2.png);
background-repeat:no-repeat,repeat;
background-position:3% 3%;
width:300px;
padding:90px 0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
圓角邊框的繪製
1.border-radius屬性
CSS3中用該屬性指定圓角半徑,就可以繪製圓角邊框啦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
border:solid 5px red;
border-radius:20px;
/* FF瀏覽器寫法 */
-moz-border-radius:20px;
/* Opera瀏覽器寫法 */
-o-border-radius:20px;
/* Safari瀏覽器寫法 */
-webkib-border-radius:20px;
background-color:Blue;
padding:20px;
width:200px;
}
</style>
</head>
<body>
<div>
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
</div>
</body>
</html>
2.在border-radius屬性中指定兩個半徑
在不同瀏覽器中效果可能不同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
border:solid 5px red;
border-radius:40px 20px;
/* FF瀏覽器寫法 */
-moz-border-radius:40px 20px;
/* Opera瀏覽器寫法 */
-o-border-radius:40px 20px;
/* Safari瀏覽器寫法 */
-webkib-border-radius:40px 20px;
background-color:Blue;
padding:20px;
width:200px;
}
</style>
</head>
<body>
<div>
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
</div>
</body>
</html>
3.繪製4個角不同半徑的圓角邊框
注:本人僅在FF瀏覽器中試驗成功
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
border:dashed 5px red;
border-radius-topleft:10px;
border-radius-topright:20px;
border-radius-bottomleft:30px;
border-radius-bottomright:40px;
/* FF瀏覽器寫法 */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:30px;
-moz-border-radius-bottomright:40px;
/* Opera瀏覽器寫法 */
-o-border-radius-topleft:10px;
-o-border-radius-topright:20px;
-o-border-radius-bottomleft:30px;
-o-border-radius-bottomright:40px;
/* Safari瀏覽器寫法 */
-webkib-border-top-left-radius:10px;
-webkib-border-top-right-radius:20px;
-webkib-border-bottom-left-radius:30px;
-webkib-border-bottom-right-radius:40px;
background-color:Blue;
padding:20px;
width:200px;
}
</style>
</head>
<body>
<div>
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
</div>
</body>
</html>
使用圖像邊框
1.border-image屬性
可讓處於隨時變化狀態的元素的長寬的邊框統一使用一個圖像繪製。讓瀏覽器在現實圖像邊框是,自動所使用的圖像分割為9部份處理
border-image:url(...) A B C D
url參數:為邊框所使用的圖像文件路徑
A B C D 表示當瀏覽器自動吧使用圖像分割時上,右,下,左邊距
border-image:url(...) A B C D / border-width
border-width屬性用來指定邊框寬度,可將四條邊的邊框指定為不同寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
border-image:url(border.jpg) 20 20 20 20;
-moz-border-image:url(border.jpg) 20 / 10px 5px 15px 20px;
-webkit-border-image:url(border.jpg) 20 / 10px 5px 15px 20px;
width:200px;
}
</style>
</head>
<body>
<div>
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
</div>
</body>
</html>
2.指定4條邊中圖像的顯示方法
border-image:url(...) A B C D / border-width topbottom leftright
topbottom表示元素的上下兩條邊中圖像的顯示方法
leftright表示元素的左右兩條邊中圖像的顯示方法
可指定:repeat,stretch,round
repeat:圖像將平鋪顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
border-image:url(test.png) 15 / 5px repeat repeat;
-moz-border-image:url(test.png) 15 / 5px repeat repeat;
-webkit-border-image:url(test.png) 15 / 5px repeat repeat;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div>
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
</div>
</body>
</html>
stretch:圖像以拉伸方式顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
border-image:url(test.png) 20 / 5px stretch stretch;
-moz-border-image:url(test.png) 20 / 5px stretch stretch;
-webkit-border-image:url(test.png) 20 / 5px stretch stretch;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div>
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
</div>
</body>
</html>
round:圖像平鋪,如果最後顯示的圖不能完全顯示,且能夠顯示的部份不到圖像一半,不顯示最後圖像,擴大前面圖像,使顯示區正好完整平鋪全部圖像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
border-image:url(test.png) 20 / 5px round round;
-moz-border-image:url(test.png) 20 / 5px round round;
-webkit-border-image:url(test.png) 20 / 5px round round;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div>
哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅
</div>
</body>
</html>
border-image和background-image可一起使用