<!doctype html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>css3最新屬性</title>
<link rel="stylesheet" href="css3.css" type="text/css">
</head>
<body>
<!--border-->
<div id="main">
<div id="zh">
<div id="ma"></div>
<div id="second"></div>
<div id="third"></div>
</div>
<!--background-->
<div id="zhu">
<div id="han"></div>
<div id="tu"></div>
<div id="sai"></div>
</div>
<!--背景漸變-->
<div id="jb">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
<div id="ab">
<div id="e"></div>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
</div>
<div id="rose">
<div id="j"></div>
<div id="k"></div>
<div id="l"></div>
<div id="p"></div>
</div>
</div>
</body>
</html>1.上面的代碼片只html的，我只是在一個界面分塊了，方便效果比較。代碼中的選擇器標籤使用不規範，望見諒。
*{
padding: 0px;
}
#main{
height: 100%;
width:1000px;
margin:0 auto;
border :1px solid black;
}
#ma,#second,#third{
width:300px;
height: 200px;
float: left;
margin-left: 20px;
margin-top: 10px;
}
#ma{
border:2px solid;
border-radius: 25px;
-o-border-radius:25px;
-webkit-border-radius:25px;
}
#second{
border :2px solid;
box-shadow:10px 10px 5px #AAAAAA;
}
#third{
border:2px solid;
border-image: url(1.jpg) 6 6 round;
-o-border-image:url(1.jpg) 6 6 round;
-webkit-border-image:url(1.jpg) 6 6 round;
}
#zhu,#zh{
width: 990px;
height:300px;
border:1px solid yellow;
}
#zhu>#han,#tu,#sai{
border:1px solid green;
width:300px;
height: 300px;
float:left;
margin-left: 9px;
}
div#zhu > #han{
background: url(1.jpg);
background-repeat: no-repeat;
background-size:200px 200px;
}
div#zhu > #tu{
background: url(1.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
}
div#zhu > #sai{
background: url(1.jpg),url(2.jpg);
background-repeat:no-repeat;
background-size:70% 70%;
background-origin:content-box;
}
#jb,#ab{
width: 900px;
height: 200px;
border:2px dotted blue;
}
#jb > #a,#b,#c,#d{
border:1px dashed black;
float: left;
width: 200px;
height: 190px;
margin-left: 20px;
}
#ab > #e,#f,#g,#h{
border:1px dashed black;
float: right;
width: 200px;
height: 190px;
margin-left: 20px;
}
#cc{
width: 900px;
height: 200px;
border:2px solid black;
}
#rose > #j,#k,#l,#p{
border:1px solid black;
width: 200px;
height: 190px;
float: left;
margin-left: 20px;
}
#a{
background:linear-gradient(red,blue);
background:-o-linear-gradient(red,blue);
background:-webkit-linear-gradient(red,blue);
background:-moz-linear-gradient(red,blue);
}
#b{
background: linear-gradient(to right,red,blue);
background: -o-linear-gradient(right,red,blue);
background: -webkit-linear-gradient(left,red,blue);
background: -moz-linear-gradient(right,red,blue);
}
#c{
background: linear-gradient(to buttom right,yellow,blue);
background: -webkit-linear-gradient(left top,yellow,blue);
background: -o-linear-gradient(buttom right,yellow,blue);
background: -moz-linear-gradient(buttom right,yellow,blue);
}
#d{
background: -webkit-linear-gradient(270deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(270deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(270deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(270deg, red, blue); /* 標準的語法 */
}
#e {
background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, green, blue); /* 標準的語法 */
}
#f {
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* 標準的語法 */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
/* 重複的漸變 */
#g {
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 標準的語法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
#h {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 標準的語法 */
}
#j {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* 標準的語法 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
#k {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* 標準的語法 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}
#l {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(30% 70%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(30% 70%, farthest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(30% 70%, farthest-side,blue,green,yellow,black);
/* 標準的語法 */
background: radial-gradient(30% 70%, farthest-side,blue,green,yellow,black);
}
#p {
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* 標準的語法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
2.這是邊框及背景的變換。 3.在我寫這篇博客的時候，這裏所列出的背景漸變IE不支持，很遺憾，由於我現在水平有限，兼容不了，歡迎廣大讀者給出解決方案
