Question

我有一个风格的按钮，我想在它周围有一个轮廓展示。我尝试过轮廓，但它不遵循按钮边框半径的曲线。还有其他方法可以做到这一点。

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

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/

如何在不使用轮廓的情况下在按钮周围显示模糊区域？

1 个答案: