html5 - 如何实现带阴影的不规则容器？

问题描述

问 题

1、效果图：

2、我做出的效果：

2、缺口处的阴影处理，实在没有思路，请问大家怎么实现这种效果呢？

解决方案

用box-shadow的inset

<div class="bar">
      <div class="garden"></div>
    </div>
<style>
      .bar{
        position:relative;
        height: 35px;
        background: #D9D9D9;
        box-shadow: inset 0 -8px 15px rgba(72, 69, 69, 0.31);
        z-index:2;
      }
      .bar .garden{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 150px;
        height: 150px;
        margin-left: 50%;
        background-color: #D9D9D9;
        box-shadow: inset 0 -8px 15px rgba(72, 69, 69, 0.31);
        transform: translate(-50%,50%);
        border-radius:100%;
      }
      .bar .garden::after{
        content:"";
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:50%;
        background-color:#fff;
      }
    </style>

效果大概就是这样子的，那个圆你用自己写的，在里面加上inset，或者你使用CSS3中的radial-gradient来实现

这篇关于html5 - 如何实现带阴影的不规则容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！