css圆形按键下方有字

html-css017

css圆形按键下方有字,第1张

css圆形按键下方有字可以带提示信息div。步骤如下:

1、新建html文档。

2、书写hmtl代码。

3、书写css公用样式表代码。

4、书写css代码。代码整体结构。

6、查看效果。

用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 */

}

效果如图:

其实我就想实现未点击按钮时,文字右上方有小圆点,点击后消失的效果

但是不想用浮动、定位,结果百度搜了一圈,大家都是用浮动、定位解决,

记录两种更好的解决方案:

1.使用sup标签

2.使用css属性vertical-align