兼容各种浏览器的圆角按钮

最新推荐文章于 2019-08-08 14:19:00 发布

原创最新推荐文章于 2019-08-08 14:19:00 发布 · 608 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

130 篇文章

订阅专栏

本文介绍了一种使用CSS来创建带有渐变效果、阴影及圆角的按钮样式的详细步骤。文章通过具体的代码示例展示了如何定义按钮的背景颜色、字体大小、边框样式等属性，并实现了从底部到顶部的绿色到亮绿色的渐变效果。

.submit_zxly {
   background-color:#179F00;
   padding:10px 20px;
   font-size:16px;
   text-decoration:none;
   border:1px solid #0B8E00;
   background-image: linear-gradient(bottom, #179F00 0%, #5DD300 100%);
   background-image: -o-linear-gradient(bottom, #179F00 0%, #5DD300 100%);
   background-image: -moz-linear-gradient(bottom, #179F00 0%, #5DD300 100%);
   background-image: -webkit-linear-gradient(bottom, #179F00 0%, #5DD300 100%);
   background-image: -ms-linear-gradient(bottom, #179F00 0%, #5DD300 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, #179F00),
   color-stop(1, #5DD300)
   );
   -webkit-box-shadow: 0 1px 0 #94E700 inset, 0 1px 2px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0 1px 0 #94E700 inset, 0 1px 2px rgba(0, 0, 0, 0.5);
   box-shadow: 0 1px 0 #94E700 inset, 0 1px 2px rgba(0, 0, 0, 0.5);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   color: #ffffff;
   display:block;
   text-align:center;
   text-shadow:0 1px rgba(0, 0, 0, 0.2);
}