css3新特性之border,background和背景渐变

来源：互联网发布：sql修改字段数据类型编辑：程序博客网时间：2024/06/05 02:39

<!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不支持，很遗憾，由于我现在水平有限，兼容不了，欢迎广大读者给出解决方案

0 0