今天小编跟大家讲解下有关“a标签定义圆角按钮并加阴影效果的实现代码是什么”的内容 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了相关资料，希望小伙伴们看了有所帮助。

a标签定义一个圆角按钮并添加阴影效果该怎么添加CSS样式呢？可以先看下面这一段CSS代码：

/*html代码*/
<aclass="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:3px3px3pxrgba(189,45,48,0.5);
-moz-box-shadow:3px3px3pxrgba(189,45,48,0.5);
box-shadow:3px3px3pxrgba(189,45,48,0.5);
background:#F55B47;
color:#FFF;
padding:5px15px;
}
</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标签的背景颜色

来源网站：太平洋学习网，http://www.tpyyes.com/a/js_css/962.html
到此这篇关于“a标签定义圆角按钮并加阴影效果的实现代码是什么”的文章就介绍到这了,更多相关内容请搜索博信以前的文章或继续浏览下面的相关文章，希望大家以后多多支持博信！