用box-shadow实现彩虹边框与凹陷按钮

box-shadow:盒子阴影。是css3新增的给力样式。

box-shadow:x y a b c inset; (后4个参数为可选) ,其中:

x为水平阴影的位置,

y为垂直阴影的位置,

a为阴影模糊的大小(可直接理解为阴影大小),

b为阴影向外延伸的距离,

c为阴影颜色, inset使变为内阴影。

具体实例代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<style>
	*{margin:0; padding:0}
		#div1{
			margin:80px auto;
			width:300px;
			height:180px;
			text-align:center;
			line-height:180px;
			font-size:30px;
			border-radius:90px;
			/*彩虹边框*/
			box-shadow:
				0 0 10px 10px red,
				0 0 10px 20px orange,
				0 0 10px 30px yellow,
				0 0 10px 40px green,
				0 0 10px 50px cyan,
				0 0 10px 60px blue,
				0 0 10px 70px purple;
		}
		#div2{
			margin:20px auto;
			width:150px;
			height:70px;
			text-align:center;
			line-height:70px;
			border-radius:20px;
			background:#c0c0c0;
			box-shadow:5px 5px #333;
		}
		#div2 a{
			display:block;
		}
</style>
<script>
	window.onload=function(){
		var div2=document.getElementById("div2");
		//鼠标按下
		div2.onmousedown=function(){
			div2.style.boxShadow="5px 5px #333 inset";
		}
		//鼠标抬起
		div2.onmouseup=function(){
			div2.style.boxShadow="5px 5px #333";
		}
		//鼠标移出
		div2.onmouseout=function(){
			div2.style.boxShadow="5px 5px #333";
		}
	}
</script>
</head>

<body>
	<div id="div1">heartmv.com</div>
	<div id="div2"><a href="#">点击</a></div>

</body>
</html>

浏览器效果如下图所示:

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:,
顶部