问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

这种类型的css阴影效果，如何做？

头像
fengjutian
    50520122164

    图片：

    clipboard.png

    做出这种左边右边上边没有阴影效果（这个好处理)
    而底边有阴影效果，但是底边的两边又没有效果？
    这种效果如何处理？

    css
    阅读 5.1k
    6 个回答
    得票最新
    头像
    Ash_Shen
      2.8k1414

      不考虑低版本浏览器兼容（IE8等）的话，可以用border-radius构建一个椭圆，再用box-shadow实现阴影。
      如果需要考虑低版本浏览器兼容的话，用png（京东）。
      css实现。

      头像
      boxsnake
        6.8k21249
        <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    #main {
        position: relative;
        margin: 30px;
        height: 200px;
        width: 200px;
        border: 1px solid #eee;
        border-bottom: none;
    }

    #main .block {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
    }

    #main .shadow {
        position: absolute;
        height: 14px;
        width: 200px;
        bottom: -7px;
        background-image: radial-gradient(#eee, #fafafa, #fff);
    }
    </style>
</head>
<body>
    <div id="main">
        <div class="shadow"></div>
        <div class="block"></div>
    </div>
</body>
</html>

        效果图：
        clipboard.png

        头像
        ZivSF
          56019148221

          商品布局后面藏一个小div，设置阴影实现商品底部水平居中位置的阴影

          头像
          iebu三毛钱
            6252549
            box-shadow: 0px 5px 5px #888888;
            头像
            Fiona
              264611

              同样适用box-shadow，只是在商品div底部定位一个div,阴影div宽度小于商品div宽度。

              头像
              peggy
                63
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style type="text/css">
    .card{position:relative;width:200px;height:200px;border:1px solid #ddd;background-color: #fff;}
    .card:before{content:"";position:absolute;bottom:0%;display:block;width:100%;height:30px；box-shadow: 0 2px 20px #ccc;border-radius:50%;z-index:-1}
    </style>
</head>
<body>
    <div class="card">
    </div>
</body>
</html>

                不考虑兼容低版本浏览器的话用伪元素

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题