css怎么画圆？其实很简单。我们需要使用一个关键属性：border-radius属性来画圆。下面本篇文章就来给大家介绍一下使用CSS border-radius属性画圆的方法，希望对大家有所帮助。

首先我们来了解border-radius 属性。

border-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 属性画圆

示例1：

div {

width: 100px;

height: 100px;

border: 1px solid red;

border-radius: 50%;

}

效果图：

示例2：

div {

width: 100px;

height: 100px;

border: 1px solid red;

border-radius: 50%;

background-color: red;

}

效果图：