[分享]css3按钮描边

CSS3按钮描边是一种非常常用的特效，可以使按钮在页面中更加明显，达到更好的视觉效果。要实现CSS3按钮描边，我们需要使用CSS3属性 outline。.btn { padding: 10px; ba...

CSS3按钮描边是一种非常常用的特效，可以使按钮在页面中更加明显，达到更好的视觉效果。要实现CSS3按钮描边，我们需要使用CSS3属性 outline。

.btn {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    outline: 2px solid #2E8B57;
} 

在上面的代码中，我们首先设置了按钮的 padding、背景颜色、文字颜色、边框等基本属性，然后通过 outline 属性添加了描边效果。在本例中，描边的宽度为 2px，颜色为 #2E8B57。

如果你想去掉描边效果，可以通过将 outline 属性的值设为 none 来实现：

.btn {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    outline: none;
} 

总体来说，CSS3按钮描边是一种简单、易用的特效，可以在网页中增加按钮的辨识度。而且，通过调整描边的颜色、宽度，可以根据页面整体的色调、设计美学等特点进行灵活的调整，得到理想的效果。