文档章节

linear-gradient渐变中的参数

红羊在厦门
 红羊在厦门
发布于 2018/10/22 15:10
字数 361
阅读 11
收藏 0

在看张鑫旭的博客

遇到渐变数值后面带参数不太理解

@supports (-webkit-mask: none) or (mask: none) {
  .box {
    border: none;
    background: linear-gradient(to bottom, #34538b, #cd0000) no-repeat;
    mask: linear-gradient(to right, #000 6px, transparent 6px) repeat-x,
          linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y,
          linear-gradient(to right, #000 6px, transparent 6px) repeat-x 0 100%,
          linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y 100% 0;
    mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
  }    
}

linear-gradient(to right, #000 6px, transparent 6px) repeat-x,

随百之,试验

http://www.css88.com/book/css/values/image/linear-gradient().htm

语法:

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值:

下述值用来表示渐变的方向,可以使用角度或者关键字来设置:

<angle>

用角度值指定渐变的方向(或角度)。

to left:

设置渐变为从右到左。相当于: 270deg

to right:

设置渐变从左到右。相当于: 90deg

to top:

设置渐变从下到上。相当于: 0deg

to bottom:

设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。

<color-stop> 用于指定渐变的起止颜色:

<color>

指定颜色。

<length>

用长度值指定起止色位置。不允许负值

<percentage>

用百分比指定起止色位置。

 

linear-gradient(to right, #000 6px, transparent 6px) repeat-x,

回到自己的理解 就是#000到6px,前都是纯#000,6px之后都是透明

© 著作权归作者所有

共有 人打赏支持
红羊在厦门
粉丝 1
博文 41
码字总数 18720
作品 0
厦门
程序员
私信 提问
CSS3线性渐变/径向渐变

CSS3线性渐变/径向渐变 linear-gradient(color1, color2, ...);(默认从上到下,可设置多个颜色) 从color1过渡到color2 标准写法background: linear-gradient(to right, color1, color2, c...

皇上洗碗
2016/10/14
19
0
CSS3实现背景颜色渐变 摘抄

一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(255,0,0)), color-stop(0.5,rgb(255,255,0)), color-stop(1,rgb(0,0,25......

上赶的大老鼠
2013/12/16
0
0
CSS Gradient详解

前言 现在设计师同学越来越高大上了,纯色背景已经不能满足人民群众日益增长的物质文化需要了,必须整渐变背景o(╯□╰)o。怎么还原呢,设计师直接丢过来一个几十K的图片,这怎么行。。。 还...

Seas0n_
2016/03/09
124
0
CSS3线性渐变

今天来谈谈CSS3中的线性渐变,有了这个,好多以前必须要用图片才能实现的效果如今可能只需简单一行代码就能实现。 首先看看今天的主角: linear-gradient()。 它,实际上不是颜色,而是背景图...

璿而不华
2017/12/14
0
0
CSS3 gradient 颜色渐变效果

CSS3 Gradient分为 linear-gradient(线性渐变) 和 radial-gradient(径向渐变)。为了更好的应用CSS3 Gradient, 需要先了解一下目前的几种浏览器的内核,主要有Mozilla( Friefox, Flock等),...

nao
2015/07/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里强制要求的21条Java开发规范,可以避免很多坑

1. 【强制】避免通过一个类的对象引用访问此类的静态变量或静态方法,无谓增加编译器解析成本,直接用类名来访问即可。 2. 【强制】所有的覆写方法,必须加@Override注解。 说明:getObject...

天王盖地虎626
17分钟前
1
0
oracle dg 备库未设置convert参数导致ORA-01111,ORA-01110

查看trace 文件: MRP0: Background Managed Standby Recovery process started (amls) started logmerger process Sun Jan 20 07:55:53 2019 Managed Standby Recovery starting Real Time ......

hnairdb
37分钟前
2
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linux-tao
今天
1
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxprobe16
今天
9
0
OSChina 周日乱弹 —— 没时间 没头发 但有钱

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @开源中国总经办主任 :分享齐一的单曲《这个年纪》 《这个年纪》- 齐一 手机党少年们想听歌,请使劲儿戳(这里) @肿肿卷 :我真的可以睡一天...

小小编辑
今天
143
7

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部