[分享]css取button点击的边框

在CSS中，可以使用border属性来设置元素的边框样式。对于button元素，当鼠标点击时会出现默认的边框样式。但是，我们也可以使用CSS来自定义这些边框样式。button:focus { outl...

在CSS中，可以使用border属性来设置元素的边框样式。对于button元素，当鼠标点击时会出现默认的边框样式。但是，我们也可以使用CSS来自定义这些边框样式。

button:focus {
    outline: none; /* 去除默认的虚线边框 */
    border: 2px solid red; /* 设置点击后的边框为红色实线 */
    border-radius: 5px; /* 设置边框的圆角为5px */
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); /* 添加一层阴影效果 */
} 

在上面的代码中，我们使用了:focus伪类来表示button元素被点击时的样式。首先，我们使用outline属性来去除默认的虚线边框。然后，使用border属性来设置边框的样式，这里我们设置了2px的红色实线边框，以及5px的圆角效果。最后，我们使用box-shadow属性添加了一层阴影效果，使得边框看起来更加立体。

当然，我们也可以根据需求自行调整这些样式属性。比如，可以将边框颜色或圆角大小改成其他的值。同时，box-shadow属性也可以调整成其他的效果，比如模糊、拉伸等。