CSS button 按钮圆角属性设置

button 按钮圆角

在web前端的网页设计当中,如果希望按钮的边角能够圆润一点,可以使用CSS中border-radius属性来设置圆角弧度的大小。

语法

border-radius:value

提示:border-radius的多种可选属性值可参考下方的实例。


按钮圆角实例代码,及在线编辑器

下面的实例,通过px、pt、cm、em、%等多种属性值设置圆角的弧度大小:

<button id='b1'>按钮1</button><br><br>
<button id='b2'>按钮2</button><br><br>
<button id='b3'>按钮3</button><br><br>
<button id='b4'>按钮4</button><br><br>
<button id='b5'>按钮5</button><br><br>

<style>
  #b1{border-radius:5px;}
  #b2{border-radius:6pt;}
  #b3{border-radius:18%;}
  #b4{border-radius:0.2cm;}
  #b5{border-radius:0.5em;}
</style>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.