首页 > 开发 > CSS > 正文

CSS3实现翘边的阴影效果的代码示例

2024-07-11 08:32:50

字体：大中小

来源：转载

供稿：网友

效果：
2016613120844752.jpg (496×183)

HTML代码：

XML/HTML Code复制内容到剪贴板

<div class="box shadow"></div>

CSS代码：

CSS Code复制内容到剪贴板

.box { width: 300px;
height: 100px; background: #ccc;
border-radius: 10px; margin: 10px;
}
.shadow { position: relative;
max-width: 270px; box-shadow: 0px 1px 4px rgba(0,0,0,0.3),/* 外阴影*/
0px 0px 20px rgba(0,0,0,0.1) inset;/*内阴影*/ }
.shadow::before,
.shadow::after { content:"";
position:absolute; z-index:-1;
}
.shadow::before, .shadow::after {
content:""; position:absolute;
z-index:-1; bottombottom:15px;
left:10px; width:50%;
height:20%; }
.shadow::before,
.shadow::after { content:"";
position:absolute; z-index:-1;
bottombottom:15px; left:10px;
width:50%; height:20%;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg);
}

上一篇：浏览器hack总结详细的浏览器兼容性的快速解决方法

下一篇：SCSS移动端页面遮罩层效果的实现及常见问题解决

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注