渐变色原理


<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>Documenttitle>
head>
<style>
    .rgb{
      
        height: 200px;
        background-color: rgb(100, 100, 100,0.5);
    }
    .lrgb{
      
        height: 200px;
        /* 
        线性渐变
        to 作用: 终点    to left rop 终点左上角 起点右下角
        直接为度数 背景色渐变 围绕元素中心进行顺时针旋转:0度;渐变从下开始到上结束
        正值:顺时针转
        负值:逆时针转
        0deg=to top
        45deg=to right top
        90deg=to right
        135deg=to right bottom
        180deg=to bottom
        等等
         */
        background: linear-gradient(to right bottom,rgba(100,100,100,0.5),rgba(11,175,99,0.5)),
        rgba(145, 11, 11, 0.5)
    }
style>
<body>
    <div class="rgb">div>
    <div class="lrgb">div>
body>
html>

渐变色原理_第1张图片效果如上

你可能感兴趣的:(渐变色)