我正在使用影子盒,但它使所有的容器都被阴影包裹起来,我怎样才能在中间制作一个阴影,如上图所示？
解决方法
从
CSS drop-shadows without images by Nicolas Gallagher
- <div class="drop-shadow curved curved-hz-2">
- <p>Horizontal curves</p>
- </div>
- .drop-shadow {
- position: relative;
- float: left;
- width: 40%;
- padding: 1em;
- margin: 2em 10px 4em;
- background: #FFF;
- -webkit-Box-shadow: 0 1px 4px rgba(0,0.3),0 0 40px rgba(0,0.1) inset;
- -moz-Box-shadow: 0 1px 4px rgba(0,0.1) inset;
- Box-shadow: 0 1px 4px rgba(0,0.1) inset;
- }
- .drop-shadow:before,.drop-shadow:after {
- content: "";
- position: absolute;
- z-index: -2;
- }
- .curved-hz-2:before {
- top: 0;
- bottom: 0;
- left: 10px;
- right: 10px;
- -moz-border-radius: 100px / 10px;
- border-radius: 100px / 10px;
- }
- .curved:before {
- top: 10px;
- bottom: 10px;
- left: 0;
- right: 50%;
- -webkit-Box-shadow: 0 0 15px rgba(0,0.6);
- -moz-Box-shadow: 0 0 15px rgba(0,0.6);
- Box-shadow: 0 0 15px rgba(0,0.6);
- -moz-border-radius: 10px / 100px;
- border-radius: 10px / 100px;
- }
