CSS-圆角边框

全栈程序员-站长 • 2025年6月11日上午9:15 • 未分类 • 阅读 0

掌握了圆角边框标签就可以做出类似百度搜索框的效果来

CSS-圆角边框

圆角边框-上

代码：

<!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>
        div{
            width: 100px;
            height: 200px;
            background-color: yellowgreen;
            margin:0 auto;
            /* border-radius:10px 0px 0px 0px; */
            /* border-radius：后跟px 和 %
            把四个角用弧线连起来，或者说把角用弧线代替
            弧线可以理解为圆角程度，值越大圆角程度越大
            v1，v2 分别代表 左上右下 右上左下
            v1,v2,v3 分别代表 左上 左下右上 右下
            v1,v2,v3,v4 分别代表 左上 右上 右下 左下 是顺时针方向旋转
            */
            border-top-left-radius:10px;
            /* 同样的，也可以设置单独的一个角为圆角
            表示左上角先设置left，后设置top是不行的，必须是top在前，left在后、
            需保证垂直方向在前，水平方向在后
            border-left-top-radius：10px；错误
            border-top-left-radius：10px；正确
            */
            border-top-right-radius: 20px;
            border-bottom-right-radius: 40px;
            border-bottom-left-radius: 80px;
            
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

圆角边框-下

<!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>
       div{
           width: 200px;
           height: 200px;
           background-color: brown;
           margin:0 auto;
           padding: 20px;
           border:20px solid  yellowgreen;
           /* border-radius:30px/60px; */
           /* 
           30px/60px-表示水分方向上圆弧程度30px，垂直方向上圆弧程度60px  只能在border-radius:30px/60px;这种写法上生效
            */
            /* border-top-left-radius:20px/80px;
            这么写是不生效的，因为不支持这种写法 */

            /* border-radius: 10px 20px 30px 40px/50px 60px 70px 80px; */
            border-radius: 100%; 
            /* 可以设置成px 或 百分比% */
            /* 想要让它变成圆形，需要设置成盒子的一半
            注意：盒子的一半是需要算上内外边距的，当然，若是直接用百分比的话，就可以省去计算这一步了，直接设置个50%就可以了；还有一点要注意的是，只要它大于等于百分之50，就都是圆形，也就是说直接设置成100%效果也是一样的
            */
       }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

圆角边框-长方形的圆角

<!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>
        div{
            width: 500px;
            height: 250px;
            background-color: chartreuse;
            margin:0 auto;
            border-radius: 10%;
            /* 在长方体上设置圆角标签最好用px，因为设置百分比的话，拿10%来举例：10%设置出来，它的长和宽是不一样的，所以设置出来的圆角也不会对称
            用px比较好拿捏
            */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

圆角边框-半圆形

<!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>
        div{
            width: 100px;
            height: 50px;
            margin:0 auto ;
            background-color: cornflowerblue;
            /* border-top-left-radius:50px ;
            border-top-right-radius:50px ; */
            border-radius: 50px 50px 0px 0px;

            /* 设置成半圆 */

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

圆角边框-扇形

<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            border-radius: 200px 0px 0px 0px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/233922.html原文链接：https://javaforall.net