CSS Note 2.0 渐变

最新推荐文章于 2023-01-11 13:14:02 发布

原创最新推荐文章于 2023-01-11 13:14:02 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS渐变

CSS Note 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了CSS中如何使用线性和径向渐变创建丰富的背景效果。从基本语法到复杂应用，包括方向控制、颜色位置设定及重复渐变等技巧。

一、CSS

@charset "UTF-8";
div{
    width: 120px;
    height: 80px;
    display: inline-block;
    margin: 10px;
    font-size: 10px;
    word-break: break-all;
    vertical-align: top;
}

#div1{
   background-image:linear-gradient(red,blue);/*默认自上而下渐变，red为起始颜色，blue为结束颜色*/
}
#div2{
    background-image:linear-gradient(to right ,blue,red);/*to right 自左向右，top bottom left right可以组合使用*/
}
#div3{
    background-image:linear-gradient(180deg,red ,blue);/*180deg通过角度控制渐变方向*/
}
#div4{
    background-image: linear-gradient(90deg ,green 5%,blue 10%,red 50%,yellow 100%);/*百分比是从小到大，表示颜色所在的渐变的位置*/
}
#div5{
    background-image: linear-gradient(90deg , green 20px, blue 50px, yellow 80px, red 120px);
}
#div6{
    background-image: linear-gradient(60deg , green 20px,blue 100px);
}
#div7{
    background-image: repeating-linear-gradient(60deg , green 20px,blue 100px);/*重复渐变的对比*/
}
#div8{
    background-image: radial-gradient(red,blue);
}
#div9{
    background-image: radial-gradient(circle ,blue ,red);
}
#div10{
    background-image: radial-gradient(ellipse at top,blue,red );/*ellipse表示椭圆*/
}
#div11{
    background-image: radial-gradient(circle 40px , blue,red,green);/*40px表示半径*/
}
#div12{
    background-image: radial-gradient(circle closest-side,blue ,red ,green );
    /*closest-side距离圆心最近的边
    farthest-side距离圆心最远的边
    closest-corner距离圆心最近的角
    farthest-corner距离圆心最远的角*/
}
#div13{
    background-image: radial-gradient(circle 20px,blue,green);
}
#div14{
    background-image: repeating-radial-gradient(circle 20px, blue,green);
}

二、效果展示