在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%,就可以得到这样的一个圆形边框。圆形边框可以用在用户的头像展示等等方法。
效果图: