html - 如何在不使用轮廓的情况下使按钮周围出现模糊区域？

Question

我有一个带样式的按钮，我想在它周围显示一个轮廓。我尝试了轮廓，但它不遵循我按钮的 border-radius 曲线。有没有其他方法可以做到这一点。

请注意，该按钮位于许多其他按钮的表格中。表格网格间距相同很重要，因此无论采用何种解决方案都必须考虑到这一点。

Answer 1

您可以尝试使用 :after 伪选择器来创建一个具有自己的边框属性(半径、颜色、宽度等)的环绕框。我在下面做了一些标记:

.button{
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid red;
    padding: 5px 10px;
    position: relative
    margin: 4px;
}
.button:after{
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid green;
    border-radius: 7px;
    -webkit-border-radius: 7px;
}

参见此处:https://jsfiddle.net/ko499adr/1/