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

最新推荐文章于 2024-09-14 16:42:13 发布

blueluu

最新推荐文章于 2024-09-14 16:42:13 发布

阅读量1.1k

点赞数

分类专栏：技术贴文章标签： css3 broder background特性

本文链接：https://blog.csdn.net/u014626807/article/details/45011035

版权

技术贴专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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