使用CSS可以实现各种不同形状的按钮。常用的方法是通过border-radius属性设置圆角,比如设置值为50%可以得到一个圆形按钮。另外,也可以通过使用定位、transform等属性来实现不规则形状的按钮。
其中,关键词包括:border-radius属性、定位(position)、转换(transform)、伪类选择器(pseudo-selector),CSS Clip Path属性和SVG坐标系统等。
举例:
.btn {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
}
.btn {
display: inline-block;
width: 120px;
height: 0;
padding: 40px 0;
text-align: center;
color: #fff;
background-color: #f00;
transform: skew(-20deg);
}
.btn {
clip-path: polygon(0 25%, 25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%);
background-color: #f00;
}
以上三个例子仅作参考,实际上实现不同形状的按钮的方法有很多,需要根据需求选择最合适的方法。