border-radius详解

洪七公 · 发表于 2022-5-1 10:15:28

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>

		自动登录	找回密码
密码			会员注册

[CSS/Html] border-radius详解