html圆圈内容怎么写如图 在线等 急

  <div style="width:100pxheight:100pxborder:1px solid redborder-radius:50pxline-height:100pxtext-align:centercolor:red">

设计师

  </div>

要做一个圆圈，首先要做一个正方形的div，然后加上border边框，边框要用border-radius圆角，当圆角像素等于div长宽的一半时，就变成了一个圆形边框

中间的文字用line-height和text-align上下左右居中

还有那个箭头应该是图片来的，可以当背景图片插入，这个我就不写了

1、在HTML中设置圆角边框有两种常见的方式。

2、一种设置圆角的方式是使用图片。把输入框设置为无边框模式，然后显示背景图，背景图里画一个圆角边框即可。

3、另一种设置圆角的方式是设置border-radius属性，border-radius即为圆角边框属性，但是IE9之前的版本是不支持这个属性的。

4、希望对你有帮助。

直接用这个在线图片转圆角图片的工具吧，直接设置一下圆角的数值，马上就能出结果，非常好用。还能单独设置图片四个角是否需要变成圆角。在线生成圆角图片,PNG|JPG图片转圆角

▼ 生成圆角图片工具使用步骤：

一、首先选定一张照片，通过改变圆角大小的数值，下方会显示照片转换效果的实时预览，默认生成的圆角为60px。

二、可以通过多选框单独选择图片需要被转换成圆角的角，默认是图片的四个角都会被转换成圆角。

三、图片预览显示的是转换后的缩略图，而下载时候是转换生成的原始大小和原始清晰度的图片。

四、因为jpg等格式的图片不支持透明背景，所以如果选定的照片原始格式为jpg等，会自动将照片转换为png格式，那么在下载时png照片占用的存储空间可能会显著增大。

五、如果圆角设置过大，可能会造成不可预计的转换结果，应当在合理范围内设置图片圆角的大小。

---