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

最新推荐文章于 2024-07-25 22:11:00 发布

翻滚吧-阿西巴

最新推荐文章于 2024-07-25 22:11:00 发布

阅读量3.1k

点赞数

分类专栏：小常识文章标签： box-shadow div四个角有边框内外盒子阴影 position

本文链接：https://blog.csdn.net/qq_40705120/article/details/82821281

版权

小常识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图：

代码：


		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>