css六边形怎么加边框阴影

CSS六边形是一种非常好看且实用的图形，但是有时候我们需要为它们添加一些特效来增强视觉效果。这里我们介绍如何为六边形添加边框和阴影。

    .hexagon {
        width: 100px;
        height: 55px;
        position: relative;
        background: #1abc9c;
        margin: 50px auto;
    }
    .hexagon:before,.hexagon:after {
        content: "";
        position: absolute;
        width: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }

    .hexagon:before {
        bottom: 100%;
        border-bottom: 27.5px solid #1abc9c;
    }

    .hexagon:after {
        top: 100%;
        width: 0;
        border-top: 27.5px solid #1abc9c;
    }

首先，在CSS中，我们需要定义相应的样式。上述代码中定义了六边形的基本样式，包括宽高、位置、颜色等。

其次，我们需要为它们添加边框。下面是修改后的代码：

    .hexagon {
        width: 100px;
        height: 55px;
        position: relative;
        background: #1abc9c;
        margin: 50px auto;
        border: 3px solid #fff;
        border-radius: 5px;
    }

在上述代码中，我们使用了CSS的border属性来为六边形添加边框，并设置了边框颜色、边框粗细和圆角。这样就可以为六边形添加一个美妙的边框了。

最后，我们需要为它们添加阴影。下面是针对该需求的代码：

    .hexagon {
        width: 100px;
        height: 55px;
        position: relative;
        background: #1abc9c;
        margin: 50px auto;
        border: 3px solid #fff;
        border-radius: 5px;
        Box-shadow: 0px 3px 5px #333;
    }

在上述代码中，我们使用了CSS的Box-shadow属性来为六边形添加阴影。该属性需要指定阴影的水平偏移、垂直偏移、阴影半径和阴影颜色等。这样就为六边形添加了一个酷炫的阴影特效。

综上所述，我们可以轻松地为CSS六边形添加边框和阴影特效。这不仅能让我们的页面更加美观，还可以增强用户体验。