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

来源:7-7 CSS3选择器 ::before和::after

番茄盐煎肉

2016-08-02 14:35

http://img.mukewang.com/57a03f050001f55104740069.jpg求教这个是怎么实现的

写回答 关注

5回答

  • Sofronia3427947
    2016-10-13 21:57:23

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

  • 小幸运17
    2016-08-03 10:24:15

    那就好。不用谢

  • 小幸运17
    2016-08-02 16:24:50

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

    番茄盐煎肉

    谢谢,已经看了,实现了

    2016-08-03 10:13:24

    共 1 条回复 >

  • yyyqqqjjj
    2016-08-02 16:23:49

    .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;

    }


  • xcy_yang
    2016-08-02 15:58:07

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

十天精通CSS3

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

242553 学习 · 2623 问题

查看课程

相似问题