你想实现的这种方式,可以给没一条信息里面写一个圆点,然后定位,就能实现了。不管上下距离多大,圆点都会在竖线上,并且跟信息条目在一条线上<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=documentgetElementById("myCanvas");
var ctx=cgetContext("2d");
ctxbeginPath();
ctxfillStyle="#FF6699";
ctxfillRect(0,0,200,200);
ctxbeginPath();
ctxarc(100,100,50,0,2MathPI);
ctxstroke();
</script>
</body>
</html>
方法一:
HTML5+CSS,注意,只有支持HTML5的浏览器才行,百度的也一样,我用搜狗浏览器切换到IE内核就变成正方形了。代码如下
<style>img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
</style>
<body>
<img src=";
方法二:
把设置成DIV的背景,然后在DIV里再装一张有圆形孔的GIF,中间的圆形孔做成透明。
此方法兼容所有浏览器。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)