css3实现圆角按钮

CSS3实现圆角按钮

点击一下.btn {
      padding: 10px 20px;
      border-radius: 8px;
      background-color: #008CBA;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
}

以上代码实现了一个基本的圆角按钮，通过设置border-radius属性来定义圆角的大小，可以使用一个数字表示四个角相同的大小，也可以使用四个数字分别表示四个角的大小。

除了设置圆角，还可以设置渐变等样式，例如：

.btn {
      padding: 10px 20px;
      border-radius: 8px;
      background: linear-gradient(to bottom, #4CAF50, #008CBA);
      color: #fff;
      font-size: 18px;
      cursor: pointer;
}
    

以上代码实现了一个渐变颜色的圆角按钮，通过设置background属性来定义渐变效果，可以使用线性渐变或径向渐变。

除此之外，CSS3还可以实现更多的效果，例如阴影、透明度等等，可以根据实际需求进行设置。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！