图片底部圆弧（border-radius的各种形状）

最新推荐文章于 2025-06-16 20:55:09 发布

想要飞翔的小猪

最新推荐文章于 2025-06-16 20:55:09 发布

阅读量1w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： css 文章标签： border-radius 底部圆弧 css 图片形状

本文链接：https://blog.youkuaiyun.com/dwb123456123456/article/details/83305642

css 专栏收录该内容

19 篇文章

订阅专栏

本文深入讲解CSS中的border-radius属性，包括其基本用法、多种声明方式及如何创建复杂的形状，如半圆、椭圆和四分之一椭圆等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.图片底部圆弧

直接看代码；里面有注释：

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html,
        body {
            width: 100%;
        }
        .box {
            width: 480px;
             margin:100px auto;
        }
        img{
            width:480px;
            height:300px;
            border-radius: 100% 100% 100% 100% / 0% 0% 30% 30%;
                         
        }
        /* border-radius的常规用法我就不说了，这里就讲解一下上面那几个参数指的是什么；前面的是水平半径；后面的是垂直半径*/
    </style>
</head>

<body>
    <div class="box">
        <img src="./1.jpg" alt="">
    </div>
</body>

</html>

下面就来讲解下border-radius这个属性：

在我们开发中常用的就是的就是border-radius:50%;但其实border-radius可以为我们提供很多形状；

border-radiu常用的三种声明方式：

border-radius: 16px;
border-radius: 4em;
border-radius: 50%;

border-radius分别指定各个角弯曲程度

当声明border-radius: 10px;时，相当于声明border-radius: 10px 10px 10px 10px;。
四个角的值分别为左上-右上-右下-左下顺时针旋转，类似于指定盒模型的margin,border,padding方式。
现将四个角指定为不同弯曲程度，结果如下：

border-radius: 10% 25% 40% 50%;

其中border-radius: 10% 25% 40% 50%;可以写成以下形式:

border-top-left-radius: 10%;
border-top-right-radius: 25%;
border-bottom-right-radius: 40%;
border-bottom-left-radius: 50%;

为border-radius分别指定水平和竖直弯曲程度

直接看实列：

半圆形

border-radius: 50% / 100% 100% 0 0;

沿纵轴劈开的半椭圆

border-radius: 100% 0 0 100% / 50%;

四分之一椭圆

border-radius: 100% 0 0 0;

还有很多形状，可以自己去尝试