html – 做弯曲阴影的最佳方式

概述对于这样的事情： 最有效的方法是什么？最好做一个图像,还是有一个方法来实现这个CSS没有一堆黑客/额外的标记,我不知道？ 此外,影子只能在IE9,FF和Chrome中工作 您将使用伪元素和box-shadow属性来执行此 *** 作.我在这里为你做了一个例子： http://jsfiddle.net/joshnh/NWnXw/ 这在IE9及以上工作. /* Shadow */.shadow { 对于这样的事情：

最有效的方法是什么？最好做一个图像,还是有一个方法来实现这个CSS没有一堆黑客/额外的标记,我不知道？

此外,影子只能在IE9,FF和Chrome中工作

解决方法 您将使用伪元素和Box-shadow属性来执行此 *** 作.我在这里为你做了一个例子： http://jsfiddle.net/joshnh/NWnXw/

这在IE9及以上工作.

/* Shadow */.shadow {    Box-shadow: 0 1px 5px hsla(0,0%,.25),inset 0 0 50px hsla(0,.05);    position: relative;}.shadow:after,.shadow:before {    bottom: 7px;    Box-shadow: 0 10px 15px hsla(0,.25);    content: '';    height: 50%;    left: 7px;    max-wIDth: 300px;    position: absolute;    right: 7px;    z-index: -1;    -webkit-transform: skew(-15deg) rotate(-8deg);       -moz-transform: skew(-15deg) rotate(-6deg);        -ms-transform: skew(-15deg) rotate(-6deg);         -o-transform: skew(-15deg) rotate(-6deg);            transform: skew(-15deg) rotate(-6deg);}.shadow:after {    -webkit-transform: skew(15deg) rotate(8deg);       -moz-transform: skew(15deg) rotate(6deg);        -ms-transform: skew(15deg) rotate(6deg);         -o-transform: skew(15deg) rotate(6deg);            transform: skew(15deg) rotate(6deg);}

总结

以上是内存溢出为你收集整理的html – 做弯曲阴影的最佳方式全部内容，希望文章能够帮你解决html – 做弯曲阴影的最佳方式所遇到的程序开发问题。

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