圆角边框border-radius

最新推荐文章于 2023-11-27 11:01:34 发布

大昇

最新推荐文章于 2023-11-27 11:01:34 发布

阅读量229

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_27523025/article/details/128882302

版权

圆角边框border-radius 四个角同时设置

border-top-left-radius: ;左上角
border-top-right-radius: ;右上角
border-bottom-left-radius: ;左下角
border-bottom-right-radius: ;右下角

每个属性的取值有：水平值垂直值水平方向的值决定了距离左或右的距离垂直方向的决定了上或者下的距离

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>首页</title>
       <style type="text/css">
           *{
               padding: 0;
               margin: 0;
           }
       .box{

           width: 600px;
           height: 600px;
           border: 5px solid black;
           margin: 100px auto;
           border-top-left-radius: 100px 200px;
           border-bottom-right-radius: 100px;

       }
       </style>

   </head>

   <body>
       <div class="box">
       </div>

   </body>

</html>