-webkit-gradient webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示

webkit内核的safari、 Chrome的Linear Gradients (线性渐变)的几点说明及演示：

webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),…] );

-webkit-gradient是background的一个属性值；
webkit内核的Linear Gradients (线性渐变) 第一组参数type（类型）为 linear；
第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%，当x1,x2,y1,y2取值为极值的时候，x1和x2可以取值left（或0%）或right（或100%），,y1和y2可以取值top（或0%）或bottom（或100%）；
当x1等于x2，y1不等于y2，实现垂直渐变，调整y1，y2的值可以调整渐变半径大小；
当y1等于y2，x1不等于x2，实现水平渐变，调整x1，x2的值可以调整渐变半径大小；
当y1不等于y2，x1不等于x2，实现角度渐变，当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变；
当x1等于x2，y1等于y2，实现没有渐变，取from色，即“ from(颜色值) ”；
实现垂直渐变和水平渐变渐变时，x1和x2可以最简单的取值是left（或0%）或right（或100%）,y1和y2可以最简单的取值是top（或0%）或bottom（或100%）；
from(开始颜色值),to(结束颜色值)是两个渐变颜色值；
[color-stop(偏移量<小数>,停靠颜色值),…]：可以使用多个color-stop，如果渐变只有2个颜色，那么可以不使用该参数；偏移量必须为小数，如果偏移量>=1,那么该color-stop相当于无效；
firefox下的Linear Gradients (线性渐变) 请参阅：
ie下可以使用渐变滤镜，请参阅： http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx

background-image:-webkit-gradient(linear,0% 100%,0% 0%,from(rgba(0,0,0,.6)),to(rgba(0,0,0,0)));

转载于:https://www.cnblogs.com/everyone/p/4704127.html

-webkit-gradient webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示相关推荐

【转】C# 开发Chrome内核浏览器(WebKit.net)
WebKit.net是对WebKit的.Net封装,使用它.net程序可以非常方便的集成和使用webkit作为加载网页的容器.这里介绍一下怎么用它来显示一个网页这样的一个最简单的功能. 第一步: 下载 ...
C# webkit 内核浏览器访问https网站显示空白或者提示 Problem with the SSL CA cert (path? access rights?)
如题解决方法: 安装中文路径,经常出现问题.改下安装路径. 只需要动态链接库所在路径上没有中文字符,webkit内核浏览器就可以访问https网址. 转自:C# webkit 内核浏览器访问ht ...
八大Webkit内核浏览器
列举出时下最流行的Webkit内核浏览器,所以我们并不会做出评测和对比. PS:本文列举的浏览器有一部分为IE+Webkit双核浏览器,如果您对其他IE内核浏览器很感兴趣<抛弃数据!用体验和感觉 ...
【转】不同内核浏览器的差异以及浏览器渲染简介
一.简单介绍一下什么是浏览器内核. 浏览器最重要或者说核心的部分是"Rendering Engine",可大概译为"解释引擎",不过我们一般习惯将之称为&quo ...
双内核浏览器内核切换控制技术
什么是双核浏览器双核浏览器支持使用两个或者以上的浏览器引擎来渲染网页,目前绝大多数国产浏览器均为双核甚至多核. 双核到底是什么内核基于Chromium的Blink/Webkit内核.一般在国产浏览 ...
Windows上使用CEF嵌入基于chrome内核浏览器小例
原文地址::https://blog.csdn.net/mfcing/article/details/43953433?utm_source=distribute.pc_relevant.none-t ...
WebKit ndash; WebKit For Android
如需转载,请注明出处! WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 这是一篇自己写于一年前的工作文档,分享 ...
论文解析：Photo2ClipArt:Image Abstraction and Vectorization Using Layered Linear Gradients
论文 Photo2ClipArt:Image Abstraction and Vectorization Using Layered Linear Gradients 发表于ACM SIGGRAPH ...
IE与IE内核浏览器的那点事
真正的IE浏览器与IE内核的浏览器是不是一回事呢,是不是完全一样咧?如果不一样又有什么关系咧?下面一起来找答案吧! 知识补给: 1.浏览内核简介 2.IE内核浏览器简介我的结论:根据以往的经验和 ...

-webkit-gradient webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示

-webkit-gradient webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示相关推荐

最新文章

热门文章