background linear-gradient参数学习与使用

最新推荐文章于 2024-10-02 07:15:00 发布

小刘先生很努力

最新推荐文章于 2024-10-02 07:15:00 发布

阅读量686

点赞数 6

文章标签：学习 javascript css

本文链接：https://blog.csdn.net/lzfengquan/article/details/136216918

版权

定义与方法
inear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

参数
方法：linear-gradient(direction, color-stop1, color-stop2, …)

direction：第一个参数表示渐变的方向。其可以是一个具体的角度值如45deg，或者是具体的方向值如to top，表示自下而上渐变；to bottom表示自上而下渐变【默认为to bottom】，还有 to right、to left等。

color-stop：渐变色的起止位置，通常是颜色加起始位置百分比。如 red 10%等。
在这里插入图片描述

.dataList {
  width: 100%;
  height: 122px;
  display: flex;
  justify-content: space-between;

  > div {
    // background:url('../../assets/image/dataBarder.png')no-repeat center/cover;
    background: linear-gradient(to left, #18D8E8, #18D8E8) left top no-repeat,
    linear-gradient(to bottom, #18D8E8, #18D8E8) left top no-repeat,
    linear-gradient(to left, #18D8E8, #18D8E8) right top no-repeat,
    linear-gradient(to bottom, #18D8E8, #18D8E8) right top no-repeat,
    linear-gradient(to left, #18D8E8, #18D8E8) left bottom no-repeat,
    linear-gradient(to bottom, #18D8E8, #18D8E8) left bottom no-repeat,
    linear-gradient(to left, #18D8E8, #18D8E8) right bottom no-repeat,
    linear-gradient(to left, #18D8E8, #18D8E8) right bottom no-repeat;
    background-size: 2px 13px, 13px 2px, 2px 13px, 13px 2px;
    position: relative;
    }
 }

看看这个人写的文章