随着CSS3标准的推广和普及,越来越多的浏览器开始支持CSS3标准,利用CSS3可以实现大量的图像效果(例如 透明、渐变 、阴影等)。
本案例中涉及到4种常用的CSS3属性:
- border-radius
- box-shadow
- text-shadow
- rgba
效果预览:利用CSS3制作无背景图片特效按钮
<a>CSS3 无背景图片特效按钮 »</a>
CSS:
<style type="text/css">
.awesome, .awesome:visited {
background-color: #2daebf;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative; cursor: pointer; }
.awesome:hover{ background-color: #007d9a; }
</style>
这在IE下就没效果了