博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3 学习+实践(三)
阅读量:4580 次
发布时间:2019-06-09

本文共 1783 字,大约阅读时间需要 5 分钟。

CSS3基本属性Gradient----渐变

现代浏览器的内核,主流内容主要有(熟悉的有Firefox,Flock等浏览器)、(熟悉的有Safari、Chrome等浏览器)、(Opera浏览器)、Trident(讨厌的IE浏览器)。

根据不同的内核,一些私有属性的css前缀不一样 

Mozilla内核   css前缀-moz;

WebKit内核  css前缀-webkit ;  

Opera 内核   css前缀 -o ;

Trident内核  css前缀 -ms ;   

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。渐变一般是用来设置背景的-- background属性。

线性渐变: 是指从左到右、从右到左渐变或者从上到下、从下到上渐变。

径向渐变: 是指以某点为圆心根据指定的直径数实现的渐变。

linear-gradient(A,B,C) 线性渐变的参数  A :角度或者left、top, 即给定一个渐变的角度; 左表示从左到右渐变;上表示从上到下渐变

                     B: 起始处的渐变颜色;  C: 终止处的渐变颜色

线性渐变在webkit下的应用:

        

在Mozilla和在Opera下只需要换个前缀就可以

在Trident下需要通过滤镜filter才能实现。

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。

在Mozilla,Opera,webkit中方向也可以设置为左上到右下的渐变。

       

也可以设置渐变的颜色多样化:

     

以及渐变的颜色的宽度

     

角度:

如果不指定一个角度,它会根据起始位置自动定义。如果你想更多的控制渐变的方向,这时就可以设置角度。

当指定的角度,请记住,它是一个由水平线与渐变线产生的的角度,逆时针方向。因此,使用0deg将产生一个左到右横向梯度,而90度将创建一个从底部到顶部的垂直渐变

 

  角度以逆时针方向转动

 

 渐变上应用透明─透明度(Transparency):

CSS3的径向渐变:

径向渐变到目前还不支持Opera的内核浏览器 

radial-gradient :   radial-gradient([方向或角度,]? [形状或大小,]? 颜色1,  颜色2[,  颜色3]*);

除了在线性渐变中看到的起始位置,方向,和颜色,径向梯度允许你指定渐变的形状(圆形或椭圆形)和大小(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover))。size的不同选项(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用来定义圆或椭圆大小的点.

在径向渐变中虽然具有相同的起止色,但是在没有设置位置时,其默认颜色为均匀间隔,这一点和我们前面的线性渐变是一样的,但是设置了渐变位置就会按照渐变位置去渐变

      

 

注意:当你的div为正方形大小时,就算设置渐变形状为ellipse,它的渐变形状也只能按照circle来进行渐变。不能继续椭圆形渐变。

size:用来指定起始点(center)到圆|椭圆的近边的距离设定的,或从起始点到圆|椭圆远角的的距离决定的。

 

 

转载于:https://www.cnblogs.com/Joans/archive/2013/03/04/2937268.html

你可能感兴趣的文章
struts (一)
查看>>
【新番推荐】工作细胞
查看>>
NYOJ 16 矩形嵌套
查看>>
Leetcode中的SQL题目练习(二)
查看>>
dubbo 集群容错源码
查看>>
Collection接口的子接口——Queue接口
查看>>
LINUX安装NGINX
查看>>
服务器启动项目抛错 没有到主机的路由
查看>>
python_85_sys模块
查看>>
第九周动手动脑
查看>>
HDU 1811 Rank of Tetris
查看>>
winform 获取当前名称
查看>>
报表分栏后的排序
查看>>
Django中models定义的choices字典使用get_FooName_display()在页面中显示值
查看>>
别人的Linux私房菜(1)计算机概论
查看>>
菜鸟之路——机器学习之线性回归个人理解及Python实现
查看>>
opengl glut vs2013配置
查看>>
dialogPostRun 覆盖方法class Dialog 动态创建
查看>>
csust1086蘑菇真的贵,友情价更高
查看>>
有关指针和数组的理解
查看>>