Question

我需要创建一个椭圆形状的弯曲渐变框阴影，它需要在div后面水平居中并偏移到底部。

这是我的标记：

<div class="about-tru">
    <div class="container">
        <h2 class="text-center heading">Welcome To TruCircles</h2>
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="col-sm-4 text-center"><img src="img/trucircles-img.jpg" alt="trucircles-image" class="img-responsive"></div>
                    <div class="col-sm-7"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dolor metus, sed feugiat diam finibus vitae. Sed dolor justo, consequat vel vulputate vitae, venenatis efficitur nibh. Vivamus blandit at nulla vel tempor. Nullam sodales nibh lorem, sed elementum lorem imperdiet sed. In in felis feugiat, laoreet nisl sit amet, blandit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum dolor ut ligula ultricies, a ornare mauris interdum. Phasellus sollicitudin urna ac tortor elementum euismod.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

这样的东西？

.about-tru{
  box-shadow : 0 0 20px;  
  border-radius: 6px;
  margin : 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="about-tru">
<div class="container">
<h2 class="text-center heading">Welcome To TruCircles</h2>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-4 text-center"><img src="http://tododepende.com/wp-content/uploads/2013/09/lorem_ipsum.gif" alt="trucircles-image" class="img-responsive"></div>
<div class="col-sm-7"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis dolor metus, sed feugiat diam finibus vitae. Sed dolor justo, consequat vel vulputate vitae, venenatis efficitur nibh. Vivamus blandit at nulla vel tempor. Nullam sodales nibh lorem, sed elementum lorem imperdiet sed. In in felis feugiat, laoreet nisl sit amet, blandit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum dolor ut ligula ultricies, a ornare mauris interdum. Phasellus sollicitudin urna ac tortor elementum euismod.</p>
</div>
</div>
</div>
</div>
</div>

Answer 2

你想要宽度为50％的shadow并且在div.about-tru的中间，检查我创建的小提琴 -
http://jsfiddle.net/nw6vzd3L/

Answer 3

据我所知，你不能以省略号的形式制作一个真正的css-shadow（据我所知，这是你想要达到的目的）。

但你可以用渐变背景来假装它 - 例如在伪元素上：

CSS

.round_shadow {
    position: relative;
    border-radius: 5px;
    position: relative;
    border: 1px solid #f00;
    background: #fff;
    padding: 1em;
}
.round_shadow:after {
    display: block;
    content: "";
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 66%);
    z-index: -1;
    position: absolute;
    top: 80%;
    right: 10%;
    left: 10%;
    bottom: -30%;
}

显然，您可以调整top，left，right和bottom值，以便将阴影定位在您想要的任何位置。另请注意，如果遗留浏览器支持存在问题，您可能需要使用渐变背景的浏览器前缀。

HTML

<div class="round_shadow">
    <p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
    <p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
    <p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>

.round_shadow {
  position: relative;
  border-radius: 5px;
  position: relative;
  border: 1px solid #f00;
  background: #fff;
  padding: 1em;
}
.round_shadow:after {
  display: block;
  content: "";
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 66%);
  z-index: -1;
  position: absolute;
  top: 80%;
  right: 10%;
  left: 10%;
  bottom: -30%;
}

<div class="round_shadow">
  <p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
  <p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
  <p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>

修改

好的，所以不需要椭圆形。为了制作一个矩形阴影，我可以想到两个解决方案，它们之间的主要区别在于你定位的选项......

第一个也许最简单的方法就是使用带阴性展开的盒子阴影（第4个参数）：

.centered_shadow {
    border-radius: 5px;
    border: 1px solid #f00;
    background: #fff;
    padding: 1em;
    box-shadow: 0 20px 10px -20px rgba(0,0,0,.3);
}

.centered_shadow {
  border-radius: 5px;
  border: 1px solid #f00;
  background: #fff;
  padding: 1em;
  box-shadow: 0 60px 10px -40px rgba(0, 0, 0, 0.3)
}

<div class="centered_shadow">
  <p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
  <p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
  <p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>

第二种方法基本上与我对椭圆阴影的建议相同（在某些情况下可以更好地控制阴影位置），除了你给伪元素一个阴影而不是渐变背景，所以：< / p>

.round_shadow {
    border-radius: 5px;
    position: relative;
    border: 1px solid #f00;
    background: #fff;
    padding: 1em;
}
.round_shadow:after {
    display: block;
    content: "";
    z-index: -1;
    position: absolute;
    top: 80%;
    right: 25%;
    left: 25%;
    bottom: 0;
    border-radius: 10px;
    box-shadow: 0 30px 50px rgba(0,0,0,.3);
}

.round_shadow {
  border-radius: 5px;
  position: relative;
  border: 1px solid #f00;
  background: #fff;
  padding: 1em;
}
.round_shadow:after {
  display: block;
  content: "";
  z-index: -1;
  position: absolute;
  top: 80%;
  right: 25%;
  left: 25%;
  bottom: 0;
  border-radius: 10px;
  box-shadow: 0 30px 50px rgba(0,0,0,.3);
}

<div class="round_shadow">
  <p>De illis, cum volemus. Quod totum contra est. In schola desinis. Quis est tam dissimile homini. Respondeat totidem verbis. Tollenda est atque extrahenda radicitus.</p>
  <p>Quia nec honesto quic quam honestius nec turpi turpius. Atqui reperies, inquit, in hoc quidem pertinacem; Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Nihilo beatiorem esse Metellum quam Regulum. Illa videamus, quae a te de amicitia dicta sunt. Quantum Aristoxeni ingenium consumptum videmus in musicis? Hos contra singulos dici est melius. Aliter enim explicari, quod quaeritur, non potest. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane.</p>
  <p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quam si explicavisset, non tam haesitaret. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur.</p>
</div>

居中渐变省略号css阴影

3 个答案:

CSS

HTML

修改