border-radius详解

2019独角兽企业重金招聘Python工程师标准>>>

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{
            width: 150px;/*宽高保持一致*/
            height: 150px;
            line-height: 150px; /*当高度与行高保持一致时为垂直居中*/
            border-radius: 50%;
            background: orange;
            margin: 50px;
            text-align: center;
            color: #fff;
        }

<div class="circle">圆形</div>

 

 

 

转载于:https://my.oschina.net/u/3887849/blog/1841517