我正在寻求减少外部依赖性——特别是通过尽可能用 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%;
}
我想要实现的是获得这三样东西:
- 仅在元素的左右边缘出现的倾斜阴影(否则无法 overflow hidden ,此元素中的其他伪元素必须超出其边缘)
- 阴影应该从黑色逐渐变为白色,因为它在垂直方向上离中间越远
- 阴影不应使用直线边缘 - 它应该稍微模糊,就像应用
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>
因为它们被用于页面上的另一个设计元素。
最佳答案
真的不打算解释太多,因为你已经知道它是如何工作的。对于那些没有的 - 基本上,我在父级上添加了一个 linear-gradient
背景。然后我在每一侧叠加 CSS 三 Angular 形(通过 :before
/:after
添加)以获得所需的外观。
jsFiddle example - 看起来和我很像。
它适用于所有主流浏览器。虽然它在 Chrome 中确实看起来更好,因为 FF 在三 Angular 形上生成锯齿状边缘。
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;
}
让我知道您的想法 - 据我所知,它们看起来是一样的。可以稍微调整渐变以使它们相同。
关于html - 我怎样才能创建这个 Angular 阴影(没有图像)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19759529/