html实现圆圈,css如何实现正圆形div？

在css中，可以利用border-radius属性来将div设置为正圆形。下面本篇文章就来给大家介绍一下border-radius属性实现正圆形div的方法，希望对大家有所帮助。

border-radius属性可以为元素添加圆角边框，将宽高相同的div元素的border-radius属性值设为50%或100%即可使div元素边框变为圆。

border-radius属性是css3新增属性，在圆角边框出现之前，前端开发有的采用整块的圆角图片作为背景，有的采用小的圆角图片分别放在元素的四角，非常麻烦。

border-radius属性的基本用法：

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

border-radius属性可以一次性对四个角设置相同的值，也可以对4个角分别设置圆角样式。而秘诀就在于设定border-radius的参数个数，border-radius的参数个数范围为1~4个。

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

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

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

示例：

div {

width: 100px;

height: 100px;

border: 1px solid red;

border-radius: 50%;

background-color: red;

}

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

效果图：

border-radius属性是一个简单又方便且实用的设置边框圆角样式的方法，在前端页面开发的很多地方得到应用；具体的使用方法，要看实际的需要。

更多CSS相关知识，可访问 CSS教程 ！