---

CSS3圆角

CSS3圆角是一种应用于HTML元素的CSS3属性，它的作用是添加圆角边框和圆角角落到一个元素中。CSS3圆角可以用于替代传统的边框图像，在前端开发中经常被使用到。 在这个技术文档里我们会详细地阐述CSS3圆角的定义以及各自的属性和用法。

CSS3圆角的属性

CSS3圆角提供了四个属性：

• border-radius: 定义元素边框的圆角
• border-top-left-radius: 定义元素左上角的圆角
• border-top-right-radius: 定义元素右上角的圆角
• border-bottom-left-radius: 定义元素左下角的圆角
• border-bottom-right-radius: 定义元素右下角的圆角

使用语法

CSS3圆角属性是将水平和垂直的弧度来定义的。它们可以单独或同时使用。以下是CSS3圆角的语法：

.border-radius {
  border-radius: 20px 40px;
  /* 分别设置水平、垂直方向的边框半径 */
  border-top-left-radius: 10px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0;
  /* 分别设置不同角的边框半径 */
}

CSS3圆角的值

数字值

可以使用数值来设置圆角的大小，取值范围为0到非负数，表示圆角的半径。

百分比值

可以使用百分比来设置圆角的大小，百分比值的范围是0%到50%。百分比值相对于元素的高度或宽度计算。

CSS3圆角的兼容性

CSS3圆角在现代浏览器中有较好的支持，例如Google Chrome、Firefox、Safari、Opera等。 而在Internet Explorer浏览器中，其支持也在6+版本中出现了。

CSS3圆角的使用案例

圆角边框

可以直接给元素设置border-radius属性，将元素的四个角切圆。例如:

.border-radius { 
  border-radius: 10px;
}

圆角滚动条

可以使用border-radius属性来美化滚动条。例如：

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border-radius: 5px;}
::-webkit-scrollbar-track { background-color: #f5f5f5;}
::-webkit-scrollbar-thumb { background-color: #4CAF50;}

圆角按钮

可以将按钮的边框和背景圆角化，创建更美观的按钮。例如：

.button-radius { 
  border-radius: 20px;
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  cursor: pointer;
}

圆角画廊

可以使用border-radius属性来显示圆角边框的画廊。例如：

.gallery { 
  border-radius: 20px;
  overflow: hidden;
}

结论

在现代Web开发中，CSS3圆角作为前端设计与美化页面不可缺少的一部分，将会越来越广泛地应用到各网站、网络应用程序和移动应用程序中。CSS3圆角在居家网站和企业网站之外，也适用于社交媒体、在线零售店、论坛、在线门户等业务的网站中。如果你想要了解更多CSS3圆角的用法和效果，可以尝试一些网站来获得更多的灵感和示例。