a标签定义一个圆角按钮并添加阴影效果该怎么添加CSS样式呢?可以先看下面这一段CSS代码:
/*html代码*/ <a class="btn-buy">去淘宝下单</a> /*对应的css代码*/ <style> .btn-buy:hover{text-decoration: none;color:white;background-color:#FF2463} .btn-buy { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 3px 3px 3px rgba(189, 45, 48, 0.5); -moz-box-shadow: 3px 3px 3px rgba(189, 45, 48, 0.5); box-shadow: 3px 3px 3px rgba(189, 45, 48, 0.5); background: #F55B47; color: #FFF; padding: 5px 15px; } </style>
a标签圆角按钮运行效果:
鼠标移动到按钮之后的效果:
代码分析:
类似-webkit 与-moz 这种类型的定义是做谷歌,IE与火狐这三个浏览器的兼容。
box-shadow: 3px 3px 3px rgba(189, 45, 48, 0.5);属性定义了a标签圆角按钮的阴影效果,四个参数分别为:向右边3px,向下边px,直径3px,阴影颜色为rgb内定义的颜色。
border-radius: 4px; 表示按钮角度直径为4px。
padding: 5px 15px; 表示内容内间距上下为5px,左右为15px。
color 表示a标签文字颜色为定义的颜色
background:定义了a标签的背景颜色