欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

gradient杂谈

程序员文章站 2022-04-20 10:00:35
...
  工作中难免遇到某些小项目中没有设计的情况,这对于PS基础薄弱的我来说非常恐怖。无奈之下,只好自己自学UI方面的知识,但对于某些能用CSS实现的背景样式等,还是尽可能地用已经掌握的知识去实现。本文主要分享的便是我在设计背景图片中接触到最多的也是之前自己忽视掉的一个CSS3属性——gradient。

  1、linear-gradient线性渐变。其基础的使用格式为: background: linear-gradient(red,black); 实现样式如下:

     gradient杂谈

  可以在参数中加上渐变方向,如 background-image: linear-gradient(to right,red,black); ,实现样式如下:

gradient杂谈

  渐变方向也可以使用角度值,如 background-image: linear-gradient(45deg,red,black);

gradient杂谈

  多种背景颜色渐变,如: background-image: linear-gradient(to right,red,yellow,black);

gradient杂谈

  设置背景颜色开始坐标,如: background-image: linear-gradient(to right,red,yellow 25%,black 50%);

gradient杂谈

  无渐变, background-image: linear-gradient(to right,red 25%,yellow 25%,yellow 50%,black 50%,black 100%);

gradient杂谈

  2、radial-gradient径向渐变。基础使用格式: background-image: radial-gradient(red,black);

gradient杂谈

  带参数的径向渐变,如: background-image: radial-gradient(circle at top left,red,black);

gradient杂谈

  3、组合使用,如条纹背景:

background-color: red;
background: 
    linear-gradient(90deg,blue 15px,transparent 0),
    linear-gradient(90deg,black 30px,transparent 0),
    linear-gradient(90deg,yellow 45px,transparent 0);
    background-size: 45px;

  先输入的渐变属性层级较高,故使用transparent让后续使用的属性显示。

gradient杂谈

  黑白砖块,

background-color: #fff;
background-image: 
    linear-gradient(45deg,#000 7px,transparent 0),
    linear-gradient(45deg,#000 7px,transparent 0),
    linear-gradient(225deg,#000 7px,transparent 0),
    linear-gradient(225deg,#000 7px,transparent 0);
background-size:20px;
background-position: 0 0 ,10px 9px,20px 18px,10px 9px;

gradient杂谈

  4、两个新的属性: repeating-linear-gradient 以及 repeating-radial-gradient

  

.repeat-linear{
    background:
    repeating-linear-gradient(red,black 5%);
}
.repeat-radial{
    background:
    repeating-radial-gradient(red,black 5%);
}

gradient杂谈

    以上所有代码实现均使用高级浏览器,兼容性问题,请自行百度。

相关标签: gradient杂谈