Question

我正在寻求减少外部依赖性 - 特别是在可能的情况下用CSS效果替换图像，例如在这种情况下：

HTML和CSS（as this fiddle shows）如下所示。

HTML

<div id="one">
  <div></div>
</div>

CSS

#one{
  width: 940px;
  height: 350px;
  padding: 0 10px;
  margin: 10px 0;
  position: relative;
}

#one{
  background-image: url("http://webhost.ischool.uw.edu/~joatwood/portfolio/images/slider-shadow.png");
}

#one > div{
  background-color: purple;
  width: 100%;
  height: 100%;
}

我希望实现的目标是获得这三件事：

仅在左右边缘从元素上脱落的倾斜阴影（否则无法隐藏溢出，此元素中的其他伪元素必须延伸到其边缘之外）
阴影应该从黑色渐变为白色，因为它离中间垂直
阴影不应该使用直边 - 它应该稍微模糊，如果你应用了box-shadow: 5px 5px 5px

到目前为止，我尝试了两种方法，但两种方法都没有完全成功：

I used transform: skewX on two container-sized pseudo-elements具有渐变背景 - 它在＃1和＃2处完全成功，但我无法找到一种方法来实现＃3。
I used transform: rotate on the afore-mentioned pseudo-elements并尝试应用一些框阴影来模拟模糊 - 这种尝试仅在＃3时成功，并且就＃1和＃2而言根本不起作用。

我使用CSS3很好，只要它适用于当前主流浏览器（Firefox，Chrome），但我不能将任何伪元素应用于内部<div> ，因为它们被用于页面上的另一个设计元素。

Answer 1

不是真的要解释得太多，因为你已经知道这一切是如何运作的。对于那些没有的人 - 基本上，我在父母身上添加了linear-gradient背景。然后我在每一侧叠加了CSS三角形（通过:before / :after添加）以获得所需的外观。

jsFiddle example - 看起来和我很相似。

它适用于所有主流浏览器。虽然它在Chrome中确实看起来更好，但FF会在三角形上产生锯齿状边缘。

<强> HTML

<div id="two">
  <div></div>
</div>

CSS

#two {
    width: 940px;
    height: 350px;
    padding: 0;
    margin-left: 10px;
    position: relative;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 2%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(255,255,255,1) 98%);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 2%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 98%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 2%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 98%);
}

#two > div {
    background-color: purple;
    width: 920px;
    height: 100%;
    margin: 0px auto;
}

#two:before, #two:after {
    content: "";
    width: 10px;
    height: 0px;
    border-top: 175px solid transparent;
    border-bottom: 175px solid transparent;
    position: absolute;
    top: 0;
}

#two:before {
    left: 0px;
    border-left: 10px solid white;
}

#two:after {
    right: 0px;
    border-right: 10px solid white;
}

让我知道你的想法 - 据我所知，他们看起来一样。可以稍微调整渐变以使它们相同。

Answer 2

<style type="text/css">
#container {
    width: 350px;
    height: 250px;
    position: relative;
}
#box {
    height: 100%;
    width: 100%;
    background-color: #909;
    position: absolute;
}
.shadow {
    width: 10px;
    height: 50%;
    position: absolute;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.9))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 ); /* IE6-9 */
    z-index: -1;
}
#TL {
    transform:rotate(-2deg);
    -ms-transform:rotate(-2deg); /* IE 9 */
    -webkit-transform:rotate(-2deg); /* Safari and Chrome */
    left: -3px;
}
#TR {
    transform:rotate(2deg);
    -ms-transform:rotate(2deg); /* IE 9 */
    -webkit-transform:rotate(2deg); /* Safari and Chrome */
    right: -3px;
}
#BR {
    transform:rotate(178deg);
    -ms-transform:rotate(178deg); /* IE 9 */
    -webkit-transform:rotate(178deg); /* Safari and Chrome */
    right: -3px;
    bottom: 0px;
}
#BL {
    transform:rotate(182deg);
    -ms-transform:rotate(182deg); /* IE 9 */
    -webkit-transform:rotate(182deg); /* Safari and Chrome */
    left: -3px;
    bottom: 0px;
}
</style>

<div id="container">
    <div id="box"></div>
    <div class="shadow" id="TL"></div>
    <div class="shadow" id="TR"></div>
    <div class="shadow" id="BR"></div>
    <div class="shadow" id="BL"></div>
</div>

如何创建这个有角度的阴影（没有图像）？

2 个答案: