html – 如何创建这个有角度的阴影(没有图像)？

概述我希望减少外部依赖性 – 特别是在可能的情况下用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; 我希望减少外部依赖性 – 特别是在可能的情况下用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("@R_502_6822@://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>因为它们被用于页面上的另一个设计元素.

解决方法 不是真的要解释得太多,因为你已经知道它是如何工作的.对于那些没有 – 基本上,我在父母上添加了线性渐变背景.然后我在每一侧覆盖CSS三角形(通过：在/之后添加),以实现所需的外观.

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,1) 2%,rgba(0,1) 40%,1) 60%,1) 98%);    background: -webkit-linear-gradIEnt(top,1) 98%);    background: linear-gradIEnt(to bottom,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 – 如何创建这个有角度的阴影(没有图像)？全部内容，希望文章能够帮你解决html – 如何创建这个有角度的阴影(没有图像)？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。