border-radius详解
1.border-radius可以同时设置1到4个值。简洁法
如果设置1个值,表示4个圆角都使用这个值。
border-radius:40px;
如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。
border-radius: 10px 50px;
如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。
border-radius: 10px 50px 40px;
如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。
border-radius: 10px 20px 30px 40px;
2.单独设置一个角的写法
border-top-left-radius: 20px; //设置左上角
border-top-right-radius: 20px; //设置右上角
border-bottom-left-radius: 20px; //设置左下角
border-bottom-right-radius: 20px; //设置左下角
3.CSS画实心圆(宽度和高度保持一致,并且设置border-radius:50%)
代码:
.circle{undefined
width: 150px;/*宽高保持一致*/
height: 150px;
line-height: 150px; /*当高度与行高保持一致时为垂直居中*/
border-radius: 50%;
background: orange;
margin: 50px;
text-align: center;
color: #fff;
}
圆形