html5 - css写的六边形怎么加边框阴影

问题描述

问 题

怎么给上下两个三角形加上边框阴影？

<div class="hexagon">
                <div class="top"></div>
                <div class="bottom"></div>
            </div>`
<style type="text/css">
.hexagon{
            position: relative;
            display:inline-block;
            margin-right: 20px;
            width: 200px;
            height: 120px;
            background-color: #fff;
            -moz-box-shadow: 0 0 20px #ddd;
            -webkit-box-shadow:0 0 20px #ddd;
            box-shadow: 0 0 20px #ddd;
            text-align: center;}
.hexagon .top{
    width: 0;height: 0;
    position:absolute;
    left:0;
    top:-60px;
    border-bottom:60px solid #fff;
    border-left:100px solid transparent;
    border-right:100px solid transparent;
}
.hexagon .bottom{
    width: 0;height: 0;
    position:absolute;
    bottom:-60px;
    border-top:60px solid #fff;
    border-left:100px solid transparent;
    border-right:100px solid transparent;
}
.hexagon .img{
    width: 200px;height: 120px;
display: table-cell;
     vertical-align:middle;
     text-align:center;
     *display: block;
     *font-size: 120*0.873;
     *font-family:Arial;
}
</style>

解决方案

纯CSS的话, box-shadow 是做不出来的, 有一个兼容性很差的方案是, 使用 filter: drop-shadow.

如果不考虑只CSS, 使用 iconfont 可以给字体加 text-shadow, 但只支持 SVG 的 iconfont 不行.

当然, 你也可以直接切图.

这篇关于html5 - css写的六边形怎么加边框阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！