（16）HTML&&CSS笔记（渐变，倒影）_html怎么给倒影设置渐变-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoma_666/article/details/97402815

1、线性渐变（linear-gradient）
background-image:来作为属性
渐变样式是从上往下的：
确定方向：

确定单方向
to right，to top，to left，to bottom
确定对角方向
to right bottom，to right top，to left bottom，to left top

单位：%，px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:None;
            width:900px;
            height:1000px;
            border:5px solid #000;
        }
        ul>li{
            float: left;
            width:200px;
            height:200px;
            border:2px solid #f00;
            margin-right:10px;
            margin-bottom:10px;
        }
        .item1{
            background-image: linear-gradient(red,yellow);
        }
        .item2{
            background-image: linear-gradient( red 30%,yellow 70%);
        }
        .item3{
            background-image: linear-gradient( red 30px,yellow 120px);
        }
        .item4{
            background-image: linear-gradient(to right, red 30px,yellow 70px,pink 200px);
        }
        .item5{
            background-image: linear-gradient(red 30px,yellow 300px);
        }
        .item6{
            background-image: linear-gradient(red,yellow);
        }
        .item7{
            background-image: linear-gradient( red,yellow);
        }
        .item8{
            background-image: linear-gradient( red,yellow);
        }
        .item9{
            background-image: linear-gradient( red,yellow);
        }
    </style>
</head>
<body> 
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
        <li class="item6"></li>
        <li class="item7"></li>
        <li class="item8"></li>
        <li class="item9"></li>
    </ul>
</body>
</html>

在这里插入图片描述
2、1、线性渐变平铺（repeating-linear-gradient）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    
        div{
            width:313px;
            height:313px;
            margin-bottom:15px;
        }
        .wrap{
            background-image: repeating-linear-gradient(#90f 0px,#f09 20px,#f90 40px);
        }
        .wrap1{
            background-image: repeating-linear-gradient(#90f 0px,#f09 10px,transparent 15px,transparent 60px),repeating-linear-gradient(to right,#90f 0px,#f09 10px,transparent 15px,transparent 60px);
        }
    </style>
</head>
<body>
    <div class='wrap'></div>
    <div class='wrap1'></div>
</body>
</html>

在这里插入图片描述
2、径向渐变（radial-gradient）
circle 圆状
ellipse 椭圆状
正方形时默认是圆形，长方形时默认是椭圆
方位值
closest-side：圆心到最近的边
closest-corner：圆心到最近的角
farthest-side：圆心到离圆心最远的边
farthest-corner：圆心到离圆心最远

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            height:4000px;
        }
        ul{
            overflow: hidden;
            list-style:None;
            width:900px;
            /* height:1000px; */
            border:5px solid #000;
        }
        ul>li{
            float: left;
            width:200px;
            height:200px;
            border:2px solid #f00;
            margin-right:10px;
            margin-bottom:10px;
        }
        .item1{
            background-image: radial-gradient(circle,red,blue);
            height:300px;
            width:300px;
        }
        .item2{
            width:500px;
            height:300px;
            background-image: radial-gradient( circle ,red,blue);
        }
        .item3{
            background-image: radial-gradient(ellipse,red,blue);
            height:300px;
            width:300px;
        }
        .item4{
            width:500px;
            height:300px;
            background-image: radial-gradient( ellipse ,red,blue);
        }
        .item5{
            background-image: radial-gradient(red,blue);
            height:300px;
            width:300px;
        }
        .item6{
            width:500px;
            height:300px;
            background-image: radial-gradient(red,blue);
        }
        .item7{
            background-image: radial-gradient(closest-side at 50px 50px,red,blue);
        }
        .item8{
            background-image: radial-gradient(closest-corner at 50px 50px ,red,blue);
        }
        .item9{
            background-image: radial-gradient(closest-corner at 50px,red,blue);
        }
    </style>
</head>
<body>
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
        <li class="item6"></li>
        <li class="item7"></li>
        <li class="item8"></li>
        <li class="item9"></li>
        <li class="item10"></li>
    </ul>
</body>
</html>

在这里插入图片描述
径向渐变平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap{
            width:600px;
            height:600px;
            background-image:repeating-radial-gradient(circle , #0ff 0px, #90f 20px);
            border-radius:50%;
            
        }
    </style>
</head>
<body>
    <div class='wrap'>
    </div>
</body>
</html>

在这里插入图片描述
3、倒影效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background-color:#ccc;
        }
        .wrap{
            float:left;
            width:300px;
            height:300px;
            border:2px solid #ccc;
            -webkit-box-reflect: below;
        }
        .wrap1{
            float:left;
            width:300px;
            height:300px;
            border:2px solid #ccc;
            -webkit-box-reflect: below 0 linear-gradient( pink , transparent);
        }
        .wrap2{
            float:left;
            width:300px;
            height:300px;
            border:2px solid #ccc;
            -webkit-box-reflect: below 0 repeating-linear-gradient( pink , transparent);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <img src="images/01.jpg" alt="" width='100%' height='100%'>
    </div>
    <div class="wrap wrap1">
        <img src="images/01.jpg" alt="" width='100%' height='100%'>
    </div>
    <div class="wrap wrap2">
        <img src="images/01.jpg" alt="" width='100%' height='100%'>
    </div>
</body>
</html>

在这里插入图片描述