文档章节

linear-gradient渐变中的参数

红羊在厦门
 红羊在厦门
发布于 10/22 15:10
字数 361
阅读 9
收藏 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
博文 36
码字总数 16834
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

php获取客户端IP

php获取客户端IP 首先先阅读关于IP真实性安全的文章:如何正確的取得使用者 IP? 「任何從客戶端取得的資料都是不可信任的!」 HTTP_CLIENT_IP头是有的,但未成标准,不一定服务器都实现。 ...

DrChenXX
昨天
0
0
. The valid characters are defined in RFC 7230 and RFC 问题

通过这里的回答,我们可以知道: Tomcat在 7.0.73, 8.0.39, 8.5.7 版本后,添加了对于http头的验证。 具体来说,就是添加了些规则去限制HTTP头的规范性 参考这里 具体来说: org.apache.tom...

west_coast
昨天
1
0
刷leetcode第704题-二分查找

今天双十一买的算法书到货了,路上刷到有人说的这个题,借(chao)鉴(xi)一下别人的思路,这个是C++标准库里面的经典方法,思路精巧,优雅好品味 int search(int* nums, int numsSize, in...

锟斤拷烫烫烫
昨天
3
0
【分享实录】BANCOR算法详解及代码实现

1 活动基本信息 1)主题:【区块链技术工坊22期】BANCOR算法详解及代码实现 2)议题: BANCOR算法的特点和优劣势 BANCOR算法和举例 如何加入BANCOR.NETWORK交易所 如何开发自己的BANCOR去中心...

HiBlock
昨天
2
0
微信小程序(2)

开始看微信小程序的教程了。刚刚看完官方教程的视图层部分。这里摘录一些自己认为的部分关键点。 1.直接修改数值无法重新渲染,需要使用setData()方法; 2.列表渲染中:wx:key用于保持项目在...

MKjy
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部