css 边框阴影效果案例 又称盒子阴影

参数:box-shadow值:水平 垂直 模糊强度 模糊尺寸 颜色 内外阴影 inset; 默认是外阴影
示例:box-shadow:1px 1px 1px 0 gray;
多参数示例:可以用,号分隔,使用多个值:box-shadow:1px 1px 1px 0 gray,2px 2px 2px 2px blue; 

直接看源码中注释即可
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	.box
    	{
    		width:500px;
    		height:300px;
    		border:1px solid #e6e6e6;
    		/*box-shadow值:水平 垂直 模糊强度 模糊尺寸 颜色 内外阴影 inset; 默认是外阴影*/
    		/*水平、垂直的正负值控制阴影方向*/
    		/*模糊尺寸可以不设或设为0,这样尺寸都是最小*/
                /*同样可以用,号分隔,使用多个值:box-shadow:1px 1px 1px 0 gray,2px 2px 2px 2px blue; */
    		box-shadow:1px 1px 1px 0 gray;	
    	}	
    	.box2
    	{
    		width:500px;
    		height:300px;
    		border:1px solid #e6e6e6;
    		margin-top:40px;
    		box-shadow:-2px 2px 2px 2px gray;	
    	}	
    </style>
</head>
<body>
<div class="box">
	盒子阴影效果
</div>	

<div class="box2">
	第二个盒子阴影效果
</div>	
	
</body> 
</html>
 
 
 
 

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND