怎么把html中按钮设置为圆形

html-css030

怎么把html中按钮设置为圆形,第1张

把html中按钮设置为圆形很简单,只需要将按钮的border-radius属性设置50%,同时将宽和高设置相同即可并去除边框线。具体实现代码如下:

<!doctype html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <input type="button" value="按钮" style="width: 50pxheight: 50pxborder-radius:              50%border: none">

</body>

</html>

运行效果如图

扩展资料:

HTML的特点

1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。

2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。

3、平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。

4、通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

参考资料:百度百科——HTML

用CSS代码设定按钮的圆角样式,这个在css3中才能实现,通过使用border-radius来实现这个效果,不过有浏览器的兼容性问题,-moz(例如 -moz-border-radius)用于Firefox;-webkit(例如:-webkit-border-radius)用于Safari和Chrome;border-radius:5px 15px 20px 25px它的意思就是上的圆角5px,右的圆角15px,下的圆角20px,左的圆角25px,通过例子来实际看下:

<div id="round"></div>

#round {

   padding:10pxwidth:300pxheight:50px

   border: 5px solid #dedede

   -moz-border-radius: 15px     /* Gecko browsers */

   -webkit-border-radius: 15px  /* Webkit browsers */

   border-radius:15px           /* W3C syntax */

}

效果如图: