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;
}
效果图: