logo标签列表

如何在CSS中制作居中阴影

htmlcss
7

这里输入图片描述

我使用的是 shadow-box，但它使得整个容器都被阴影包围。

如何让阴影只在中间像上面的图片一样呢？

2
使用背景图像可能是最简单的方法。 - grc
2
请问您已经尝试了什么，以便我们能够提供帮助？ - Mohammad Areeb Siddiqui
3个回答
9

来自 Nicolas Gallagher 的 CSS 阴影效果无需图片

JSFIDDLE

<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, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 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, 0, 0.6);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    -moz-border-radius: 10px / 100px;
    border-radius: 10px / 100px;
}
7
这是您可以执行的方法：
两种方式，您可以使用以下任一一种（哪个更适合您）
第一种：使用边框半径
网址：http://jsfiddle.net/qTYps/2/ - 尚未在IE8上测试
您可以通过更改rgba值来更改阴影（深度/浅度）或颜色。
.box {
  width:90%;
  padding:20px;
  background:#fff;
  margin:20px auto 60px;
  border-radius:2px;
}

.css3-shadow{
   position:relative;
   -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3); // You can remove this if you only want bottom shadow
   box-shadow:0 1px 4px rgba(0, 0, 0, 0.3); // You can remove this if you only want bottom shadow
}

.css3-shadow:after{
  content:"";
  position:absolute;
  z-index:-1;
  -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
  box-shadow:0 0 20px rgba(0,0,0,0.8);
  bottom:0px;
  left:10%;
  right:10%;
  width:80%;
  height:50%;
  -moz-border-radius:100%;
  border-radius:100%;
}

第二种方法 - 使用径向渐变 - 您可以通过更改百分比和RGB的值来改变颜色的亮度-暗度。

网址: http://jsfiddle.net/qTYps/1/ - 未在IE8上测试过

.box {
  width:90%;
  padding:20px;
  background:#fff;
  margin:20px auto 60px;
  border-radius:2px;
}

.css3-shadow{
  position:relative;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}

.css3-shadow:after{
  content:"";
  position:absolute;
  z-index:-1;
  top:100%;
  bottom:0;
  width:120%;
  height:50px;
  left:-10%;
  right:-10%;
  background:-webkit-radial-gradient(50% -3%, ellipse cover, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 30%);
  background:radial-gradient(ellipse at 50% -3%, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 30%);
}

根据您的需求，您可以更改阴影百分比、像素和rgba值。这样应该就可以了。

0
4
有了3000个声望，你现在应该知道纯链接回答是不受欢迎的。如果那些资源消失了，这个答案对未来的访问者将没有用处。 - cimmanon
好的链接，但我认为你应该在你的回答中添加一些代码。 - display-name-is-missing
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接