web前端—前端三剑客之css(3)：圆角样式及渐变色

最新推荐文章于 2024-05-08 16:09:38 发布

觅远

最新推荐文章于 2024-05-08 16:09:38 发布

阅读量626

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/JBY2020/article/details/116211834

版权

圆角样式

复合写法

圆角样式如同margin一样，可以单独对每个边角的小圆设置一个不一样的半径值。

单个属性值：四个小圆的半径相同 border-radius：50%;

两个属性值：左上与右下，左下与右上 border-radius：50% 30%;

三个属性值：左上右上与左下右下 border-radius：50px 30px 20px;

单例写法

border-top-left-radius:50%; /*左上角小圆半径*/

border-top-right-radius:30px; /*右上角小圆半径*/

border-bottom-right-radius:30px; /*右下角小圆半径*/

border-bottom-left-radius:30%; /*左下角小圆半径*/

border-radius不仅可以接受长度值，还可以接受百分比值。这个百分比值会基于元素的尺寸进行解析，即宽度用于水平半径的解析，而高度用于垂直半径的解析。

<!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>圆角样式</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            color: yellow;
            text-align: center;
            font-size: 30px;
        }
        .s1{
            border-radius: 50%;      /*  设置圆角用百分比或者像素都可以，最大设置为50px或者50%  */
        }
        .s2{
            background-color: royalblue;
            border-radius: 10px 30px 40px 50px;
        }
        .s3{
            background-color: springgreen;
            border-top-left-radius: 30px;      /*  单例设置左上角圆角   */
            border-top-right-radius: 50px;     /*  单例设置右上角圆角   */
            border-bottom-right-radius: 10px;  /*  单例设置右下角圆角   */
            border-bottom-left-radius: 50%;    /*  单例设置左下角圆角   */
        }
        .s4{
            width: 300px;
            border-radius: 50%;
        }
        .s5{
            width: 300px;
            border-radius: 50%/50%;
        }
    </style>
</head>
<body>
    <div class="s1"></div><br>
    <div class="s2"></div><br>
    <div class="s3">单例模式设置圆角角度</div><br>
    <div class="s4">通过矩形设置圆角得到椭圆</div><br>
    <div class="s5"></div><br>
</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>渐变色</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            text-align: center;
            font-size: 20px;
        }
        .j1{
            background-image: linear-gradient(red,yellow);
        }
        .j2{
            background-image: linear-gradient(to right,aqua, rgb(0, 255, 42));
        }
        .j3{
            background-image: linear-gradient(to top,aqua 0, rgb(0, 255, 42) 100%);
        }
        .j4{
            background-image: linear-gradient(to bottom right,rgb(255, 174, 0),rgb(43,255,42));
        }
        .j5{
            background-image: linear-gradient(30deg,red,green,aqua);
        }
        .j6{
            background-image: radial-gradient(green,aqua);
        }
        .j7{
            /* background-image: repeating-linear-gradient(30deg,rgb(0, 255, 106) 20%,yellow 40%); */
            background: repeating-linear-gradient(30deg,rgb(0, 255, 106) 20%,yellow 40%);
        }
        .j8{
            /* background-image: repeating-radial-gradient(red 95%,yellow 98%); */
            background: repeating-radial-gradient(red 95%,yellow 98%);
        }
        .j9{
            box-sizing: border-box;
            border: rgb(0, 255, 42) solid 5px;
            background: repeating-linear-gradient(red 95%,yellow 98%) top left/30% 30% no-repeat,
                        repeating-radial-gradient(red 95%,yellow 96%) center/50% 50% no-repeat ,aqua;
        }
    </style>
</head>
<body>
    <div class="j1">线性渐变</div><br>
    <div class="j2">线性渐变，设置颜色渐变方向</div><br>
    <div class="j3">线性渐变，设置渐变色的百分比</div><br>
    <div class="j4">线性渐变，斜角方向渐变</div><br>
    <div class="j5">线性渐变，角度值旋转</div><br>
    <div class="j6">径向渐变</div><br>
    <div class="j7">重复线性渐变</div><br>
    <div class="j8">重复径向渐变</div><br>
    <div class="j9">渐变设置背景图片</div>
</body>
</html>

repeating-linear-gradient() 和 repeating-radial-gradient()。它们的工作方式跟linear-gradient()和radial-gradient()差不多，只有一点不同：色标是无限循环重复的，直到填满整个背景。

觅远

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端—前端三剑客之css(3)：圆角样式及渐变色

圆角样式复合写法圆角样式如同margin一样，可以单独对每个边角的小圆设置一个不一样的半径值。单个属性值：四个小圆的半径相同 border-radius：50%;两个属性值：左上与右下，左下与右上 border-radius：50% 30%;三个属性值：左上右上与左下右下 border-radius：50px 30px 20px;单例写法border-top-left-r...
复制链接

扫一扫