css之div属性box-shdow边框效果以及阴影效果

六、属性box-shadow的边框效果以及阴影效果

border border-in
shadow shadow-in shadow-write shadow-big
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			.hover-con{margin: 20px auto;padding:0px 20px;width:90%; text-align: center;border: 1px solid #000000;}
			.ech-border,.ech-border-in{
			    transition: all .4s;
			    display: inline-block;
				margin: 20px;
				width: 80px;
				height: 80px;
				line-height: 80px;
				vertical-align: top;
				text-align: center;
				background:#E4AC00;
				color: #FFFFFF;
				cursor: pointer;
			}
			.ech-border:hover {
			    box-shadow: 0 0 0 4px #FF0000, 0 0 1px transparent;
			}
			
			.ech-border-in:hover {
			    box-shadow: inset 0 0 0 4px #FF0000, 0 0 1px transparent;
			}
			.ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{
			    transition: all .4s;
			    display: inline-block;
				margin: 20px;
				width: 110px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				vertical-align: top;
				background:#0069D9;
				color: #FFFFFF;
				cursor: pointer;
			}
			.ech-shadow:hover {
			    box-shadow: 0 0 10px #333;
			}   
			.ech-shadow-in:hover {
			    box-shadow: inset 0 0 10px #333;
			}
			.ech-shadow-write:hover {
			    box-shadow: inset 0 0 20px #fff;
			}
			.ech-shadow-big:hover {
			    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
			    transform: scale(1.1);
			}
		</style>
	</head>
	<body>
		<div class="hover-con">
			<span class="ech-border">border</span>
			<span class="ech-border-in">border-in</span>
		</div>
		<div class="hover-con">
			<span class="ech-shadow">shadow</span>
			<span class="ech-shadow-in">shadow-in</span>
			<span class="ech-shadow-write">shadow-write</span>
			<span class="ech-shadow-big">shadow-big</span>
		</div>
	</body>
</html>

　　

posted on 2017-12-06 12:11  木之子梦之蝶  阅读(463)  评论(0)    收藏  举报

导航