// a标签样式
a {
display: inline-block;
padding: .7em 1.5em;
background-color: #dd004b;
color: #fff;
border-radius: .3em;
}
// a:hover 和 a:active 样式
a:hover,
a:active {
background-color: #de2187;
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
}上面的代码中，大家为a标签设置了默认样式，然后通过:hover和:active选择器来设置鼠标悬停和点击时的样式。
其中，background-color可以设置背景色，而background-image则可以设置背景图片，在本例中，大家使用了CSS3新增的linear-gradient函数，通过它可以生成一个渐变背景。函数中的参数分别表示渐变的方向和每一个颜色的位置和颜色值。
这里还有一些需要注意的地方。首先，为了配合渐变效果，大家还设置了透明度等。其次，在设置渐变函数的位置和颜色时，需要按照一定的格式来使用，否则渐变效果将无法正常显示。
最后，大家需要注意的是，虽然渐变效果很好看，但在一些老旧的浏览器中可能无法正常显示。所以在使用时需要提前做好兼容性处理，以确保网站在各种设备和浏览器上都能够正常显示。