请问这种阴影是怎么实现的

求教这个是怎么实现的

番茄盐煎肉

2016-08-02

源自：十天精通CSS3 7-7

关注问题我要回答

713

操作

收起

5 回答

Sofronia3427947
2016-10-13

翘边阴影主要靠border-radius实现的。

0 回复有任何疑惑可以回复我~

小幸运17
2016-08-03

那就好。不用谢

0 回复有任何疑惑可以回复我~

小幸运17
2016-08-02

建议你学一下http://www.imooc.com/learn/240这个课程，css3实现翘边阴影的效果。

0 回复有任何疑惑可以回复我~

#1

番茄盐煎肉提问者

谢谢，已经看了，实现了

2016-08-03 回复有任何疑惑可以回复我~

yyyqqqjjj
2016-08-02

.effect::before, .effect::after{

content:"";

position:absolute;

z-index:-1;

-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);

-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:50%;

bottom:0;

left:10px;

right:10px;

-moz-border-radius:100px / 10px;

border-radius:100px / 10px;

}

0 回复有任何疑惑可以回复我~

xcy_yang
2016-08-02

使用的：after和:before添加空元素，然后设置边框阴影圆角radius的值

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

十天精通CSS3

参与学习 242105 人
解答问题 2623 个

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

本课相似问答

1 回答用#阴影生效，用：没阴影，为什么？

3 回答阴影的X,Y偏移量是怎么回事

1 回答添加多个阴影，每个阴影的颜色是怎么定的？最多能添加多少？

4 回答PSD设计稿里有文字阴影，前端怎么确定阴影的值呢？

5 回答阴影的参数

搜索更多本课相关问答

请问这种阴影是怎么实现的

我要回答关注问题

意见反馈帮助中心 APP下载