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

前端之家收集整理的这篇文章主要介绍了html – 做弯曲阴影的最佳方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对于这样的事情:

最有效的方法是什么?最好做一个图像,还是有一个方法来实现这个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相关文章