A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
50px 或 999px
只要设置的数值大于等于按钮高度的一半,浏览器就会自动将两侧渲染为半圆形,而中间部分保持直线连接。
.button {
border-radius: 999px; /* 或者 50% */
/* 或者使用足够大的像素值,例如 100px */
}
非对称按钮,CSS 可以使用四个值的写法:
/* 顺序:左上 右上 右下 左下 */
.button-half {
border-radius: 40px 0 0 40px; /* 左边圆,右边方 */
}
.button-half-right {
border-radius: 0 40px 40px 0; /* 右边圆,左边方 */
}