html中圆样式怎么写,css怎么绘制圆形？

在css中，可以利用border-radius属性来绘制圆形。border-radius属性可以为元素添加圆角边框，将宽高相同元素的border-radius属性值设为50%或100%即可使元素边框变为圆形。

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性；可以为元素添加圆角边框。border-radius ：同时设置4个边框的圆角样式。

border-top-left-radius ：设置左上角边框的圆角样式。

border-top-right-radius ：设置右上角边框的圆角样式。

border-bottom-left-radius ：设置左下角边框的圆角样式。

border-bottom-right-radius ：设置右下角边框的圆角样式。

border-radius语法：border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

属性值：length 定义圆角的形状。

% 以百分比定义圆角的形状。

border-radius(含义是”边框半径”)，只需要给border-radius 提供值，就能设置边框圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等都可以。

示例：绘制圆形

.demo{

width: 100px;

height: 100px;

border: 1px solid salmon;

background-color: salmon;

border-radius: 50%;

/*border-radius: 100%;*/

}

只要把border-radius里的值设置为50%或100%，就可以得到这样的一个圆形边框。圆形边框可以用在用户的头像展示等等方法。

效果图：