给一个div盒子添加内外阴影,且只有四角有边框的效果

效果图:

代码:


		body{
			background-color: #000;
		}
		#box{
		width: 600px;
		height:400px;
		box-shadow:0 0 6px 1px rgba(255,255,255,.5),0 0 6px 1px rgba(255,255,255,.5) inset; /*参数:X轴,Y轴,迷糊度,扩展半径,阴影颜色,内部或外部阴影(默认为外部阴影,可省略)*/
		margin:0 auto;
		position: relative;
		padding:5px;
		box-sizing:border-box;
		color:#fff;
		/*border:1px solid #000;*/
		}
		#box span{
			position: absolute;
			width:60px;
			height:30px;
		}
		#box .one{
			left:0;
			top:0;
			border-top:1px solid #FF0000;
			border-left:1px solid #FF0000;
			margin:-1px 0 0 -1px;
		}
		#box .two{
			right:0;
			top:0;
			border-top:1px solid #FF0000;
			border-right:1px solid #FF0000;
			margin:-1px -1px 0 0;
		}
		#box .three{
			left:0;
			bottom:0;
			border-left:1px solid #FF0000;
			border-bottom:1px solid #f40;
			margin:0 0 -1px -1px;
		}
		#box .four{
			right:0;
			bottom:0;
			border-right:1px solid #FF0000;
			border-bottom:1px solid #f40;
			margin:0  -1px -1px 0;
		}
		<div id="box">
			<span class="one"></span>
			<span class="two"></span>
			<span class="three"></span>
			<span class="four"></span>
			11真卡次年11真卡次年11真卡次年11真卡次年11真卡次年11真卡次年11真卡次年11真卡次年11真            
		</div>

猜你喜欢

转载自blog.csdn.net/qq_40705120/article/details/82821281
今日推荐