[分享]css3按钮外发光

CSS3中提供了许多新的样式特性，其中比较流行的一种就是按钮外发光效果。通过CSS3的boxshadow属性可以实现按钮的外发光效果，为网页增加更加美观的视觉效果。.btn { borderradiu...

CSS3中提供了许多新的样式特性，其中比较流行的一种就是按钮外发光效果。通过CSS3的box-shadow属性可以实现按钮的外发光效果，为网页增加更加美观的视觉效果。

.btn {
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px;
    box-shadow: 0 0 10px #4CAF50;
} 

上述代码中，我们首先定义了一个.btn类来表示按钮，然后设置了按钮的圆角、背景颜色、文字颜色、内边距、文本对齐方式、文本装饰方式、内联块级显示和字体大小等基本样式。接着，我们使用box-shadow属性为按钮添加了外发光效果，其中0 0代表阴影位于元素正下方，10px表示阴影的大小，#4CAF50表示阴影的颜色。

除了上述代码之外，我们也可以通过多个投影来为按钮添加更为复杂的外发光效果，如下所示：

.btn {
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px;
    box-shadow: 0 0 10px #4CAF50,
                0 0 20px #4CAF50,
                0 0 30px #4CAF50,
                0 0 40px #4CAF50;
} 

上述代码中，我们通过box-shadow属性来添加了四个投影，分别为大小为10px、20px、30px和40px，颜色均为#4CAF50。这样可以使得按钮的外发光效果更为明显，让网页更加美观。

总之，使用box-shadow属性可以方便地为按钮添加外发光效果，为网页增加更加美观的视觉效果。