常用CSS属性之圆角边框

超越～and me

于 2024-04-28 15:26:45 发布

阅读量684

点赞数 15

分类专栏： html基础文章标签： css 前端

本文链接：https://blog.csdn.net/2301_78986604/article/details/138279141

版权

html基础专栏收录该内容

56 篇文章 0 订阅

订阅专栏

一.圆角边框原理

只需要在已有的盒子标签里面添加属性如下即可：

border-radius:10px;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   p{
       text-align:center;
       line-height:100px;
       border:15px solid blue;
       width:200px;
       height:100px;
       border-radius:15px;
   }
  </style>
</head>
<body>
  <p>这是一个圆角边框</p>
</body>
</html>

二.圆角边框使用

单位可以像上述那样，直接写成像素；亦可像如下这样写成百分比的形式：当比例为50%时，即半径与矩形的一半相等——即为圆形（此时是宽度的一半！）

border-radius:50%;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   p{
       text-align:center;
       line-height:100px;
       border:15px solid blue;
       width:500px;
       height:200px;
       border-radius:50%;
   }
  </style>
</head>
<body>
  <p>圆角半径为长方形大小的一半时，显示为椭圆形</p>
</body>
</html>

常用语法：

（1）border-radius：50%，给元素设置50%的圆角大小。

（2）border-radius：40% 30%，给元素的左上角、右下角设置40%的圆角大小，给元素的右上角、左下角设置30%的圆角大小。

（3）border-radius：10% 20% 30% 40%，给元素的左上角设置10%的圆角大小，给元素的右下角设置20%的圆角大小，给元素的右上角设置30%的圆角大小、给元素的左下角设置40%的圆角大小。

（4）border-radius：10px，统一给元素的4个角设置10px的圆角大小。

（5）border-radius：10px 20px，给元素的左上角、右下角设置10px的圆角大小，给元素的右上角、左下角设置20px的圆角大小。

（6）border-radius：10px 20px 30px 40px，给元素的左上角设置10px的圆角大小，给元素的右下角设置20px的圆角大小，给元素的右上角设置30px的圆角大小、给元素的左下角设置40px的圆角大小。

注意：

（1）以百分比设置圆角大小时，最大值为50%。

（2）以固定值设置圆角大小时，最大值为元素宽度和高度里面最小值的一半。

超越～and me

关注

15
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
常用CSS属性之圆角边框

（6）border-radius：10px 20px 30px 40px，给元素的左上角设置10px的圆角大小，给元素的右下角设置20px的圆角大小，给元素的右上角设置30px的圆角大小、给元素的左下角设置40px的圆角大小。（3）border-radius：10% 20% 30% 40%，给元素的左上角设置10%的圆角大小，给元素的右下角设置20%的圆角大小，给元素的右上角设置30%的圆角大小、给元素的左下角设置40%的圆角大小。（1）border-radius：50%，给元素设置50%的圆角大小。
复制链接

扫一扫

专栏目录