css 中应用 border-radius 特性为元素设定圆弧外框，可指定一个或四个长短值，各自表明四个角的圆弧水平：一个值：适合所有角。2个值：横向和纵向半经，适合所有角。三个值：左上角、右上角和右下方。四个值：左上角、右上方、右下方和左下方。

CSS 圆弧外框设定

在 CSS 中，可以用 border-radius 特性为元素设定圆弧外框。border-radius 基础属性是一个或四个长短值，各自表明原素四个角的圆弧水平：

• 一个值：运用同样的圆弧半径到全部四个角。
• 2个值：水准半经和垂直半径，用于全部四个角。
• 三个值：左上角、右上方和右下角半经。
• 四个值：各自用于左上角、右上方、右下方和左下方。

词法：

border-radius: <length-value> | <percentage-value> | inherit;</percentage-value></length-value>

实例：

马上学习培训“前面完全免费学习心得（深层次）”；

.rounded-rectangle {
  border-radius: 10px;  /* 全部角半径为 10px */
}

.oval-button {
  border-radius: 50%;  /* 全部角半径为 50%，即产生一个圆形 */
}

/* 左上角、右上方、右下方、左下方半经分别是 10px、20px、30px、40px */
.different-radii {
  border-radius: 10px 20px 30px 40px;
}

• 圆弧半径不能大于原素宽度或相对高度一半。
• inherit 值可传承父元素的圆弧半径设定。

以上就是关于css外框圆弧如何设置的详细内容，大量欢迎关注php中文网站其他类似文章！