CSS实现元素右上角的小圆点

html-css028

CSS实现元素右上角的小圆点,第1张

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

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

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

1.使用sup标签

2.使用css属性vertical-align

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

.redcircle {undefined

position: absolute

margin: 52px 45px

width: 12px

height: 12px

background: #FF0000

border-radius: 50%

border: 1px solid #FF6347

}

.greencircle {undefined

position: absolute

margin: 52px 45px

width: 12px

height: 12px

background: #228B22

border-radius: 50%

border: 1px solid #3CB371

}

</html>

可以使用 DrawArc 方法来实现有间隔的圆。这个方法需要提供七个参数：左上角 X 坐标、左上角 Y 坐标、右下角 X 坐标、右下角 Y 坐标、开始弧度、结束弧度、是否使用顺时针绘制（true 为顺时针）。