border-radius

最新推荐文章于 2024-04-29 12:00:00 发布

小白白中之白

最新推荐文章于 2024-04-29 12:00:00 发布

阅读量498

点赞数

分类专栏：网页笔记

本文链接：https://blog.csdn.net/m0_53438035/article/details/119046278

版权

网页笔记专栏收录该内容

41 篇文章 2 订阅

订阅专栏

原理

将某一特定的椭圆（圆属于特殊的椭圆）放置图形边角并与图形的角的两边相切，图形的边角变为其某一段弧（这里可能不好理解可以先看下面再反过来看上面）

如何确定上面所说的特定的椭圆？

下文黑色加粗部分

一：一个参数

如果border-radius只有一个参数，参数则为px或百分比

px

代码

#a{
        width: 100px;
        height: 100px;
        background-color: aqua;
        border-radius: 25px;
    }

效果
在这里插入图片描述
解释：
请添加图片描述
我们设置了border-radius: 25px;则为四条半径为25px的椭圆，也就是半径为25px的圆。将圆放置于图形边角并与角的两边相切，图形的边角变为圆的一段弧，如图所示。其余三个角同理。

百分比

代码

 #a{
        width: 100px;
        height: 100px;
        background-color: aqua;
        border-radius: 50%;
    }

效果
在这里插入图片描述
解释

我们设置了border-radius: 50%，则椭圆的横半径为图形width的50%，椭圆的竖半径为图形height的50%，也就是一个半径为50px的圆。将圆放置于图形边角并与角的两边相切，图形的边角变为圆的一段弧，如图所示。其余三个角同理。

二：两个参数

px

代码：

#a{
        width: 100px;
        height: 100px;
        background-color: aqua;
        border-radius: 25px / 25px;
    }

效果：
在这里插入图片描述

解释：
我们设置border-radius: 25px / 25px，则椭圆的横半径为25px，竖半径为25px，也就是一个半径为50px的圆，然后同上。

百分比

代码：

#a{
        width: 100px;
        height: 100px;
        background-color: aqua;
        border-radius: 50% / 50%;
    }

效果：
在这里插入图片描述
解释：
我们设置了border-radius: 50% / 50%，则椭圆的横半径为图形width的50%，椭圆的竖半径为图形height的50%，也就是一个半径为50px的圆。解释同上

多个参数

事实上我们可以对图形四个不同的角设置不同的椭圆
在这里插入图片描述
从左上开始进行顺时针旋转确定四个角的椭圆，如上图，连线的表示图形左上角对应的椭圆，其中100%表示横半径，50%表示竖半径

参数不足时满足对角线相等的原则(只有一个参数则全部都一样)
例如：

border-radius: 2em 1em 4em / 0.5em 3em;

等价于

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 10px auto;
        
    }
    body{
        text-align: center;
        height: 100vh;
    }
    #a{
        width: 100px;
        height: 100px;
        background-color: aqua;
        border-radius: 20%
    }
    #b{
        width: 100px;
        height: 100px;
        background-color: aqua;
        border-radius: 100% 100% 50% 50% / 50% 50% 50% 50%
    }
    #c{
        width: 100px;
        height: 100px;
        background-color: aqua;
        border-radius: 200% 200% 100% 100% / 100% 100% 100% 100%
    }
    #e{
        width: 100px;
        height: 100px;
        background-color: aqua;
        border-radius: 200% 200% 50% 50% / 50% 50% 50% 50%
    }
    #d{
        width: 100px;
        height: 100px;
        background-color: aqua;
        border-radius: 50%;
    }
    </style>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="e"></div>
    <div id="d"></div>
</body>
</html>

效果：
在这里插入图片描述
我们来观察下id选择器为c的图形。经过计算左上角的椭圆横半径应为200px，竖半径为50px，但我们发现不符合事实。
原因如下：

角曲线不得重叠：当任意两个相邻边框半径的总和超过边框的长度时，UA（标准实现方）必须按比例减少所有边框半径的使用值，直到它们没有重叠

可能不大好理解，我们看看下面这张图
在这里插入图片描述

①：表示上边椭圆横半径之和
②：表示下边椭圆横半径之和
③：表示左边椭圆竖半径之和
④：表示右边椭圆竖半径之和

当任意两个相邻边框半径的总和超过边框的长度时

即①或②或③或④超过了100%

必须按比例减少所有边框半径的使用值，直到它们没有重叠

上图中①超过了100%，即①应变为50% 50%同时其他的按比例减少。所以等效为

   border-radius: 50% 50% 25% 25% / 25% 25% 25% 25%

如下图：
请添加图片描述

参考文章：
CSS border-radius 属性
 Border-radius 50% vs 100%
前端Tips#3 - 简写的 border-radius 100% 和 50% 是等效的
 了解一下border-radius的实现原理
 css3之border-radius理解

使用工具:
FANCY-BORDER-RADIUS

小白白中之白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
border-radius

原理将某一特定的椭圆（圆属于特殊的椭圆）放置图形边角并与图形的角的两边相切，图形的边角变为其某一段弧（这里可能不好理解可以先看下面再反过来看上面）如何确定上面所说的特定的椭圆？下文黑色加粗部分一：一个参数如果border-radius只有一个参数，参数则为px或百分比px代码#a{ width: 100px; height: 100px; background-color: aqua; border-radius: 25px;
复制链接

扫一扫