1、css3 渐变的属性例子:#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.....
分类:
Web程序 时间:
2016-01-06 17:51:45
阅读次数:
130
收集的一些轻量级非常实用的前端开发小工具:CSS3相关CSS3样式生成器:http://www.css88.com/tool/css3Preview/CSS3渐变样式生成器,类似Photoshop中的渐变界面:http://www.colorzilla.com/gradient-editor/CSS...
分类:
其他好文 时间:
2015-12-27 14:49:58
阅读次数:
187
Color Stops:在使用CSS3渐变属性生成图片的时候,有时候为了打造更丰富的渐变效果除了声明渐变线上的起始点和终止点的色值,还有声明一些中间点的色值,这些点我们就称之为Color Stops。一个色值加上当前点的位置。当我们省略点位置表示的时候Color Stops helper funct...
分类:
其他好文 时间:
2015-12-02 12:21:37
阅读次数:
142
通过使用 css3 渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡,由于用到css3所以需要考虑下浏览器兼容问题,例如:从左到右的线性渐变,且带有透明度的样式:#grad {background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgb...
分类:
Web程序 时间:
2015-11-06 19:25:09
阅读次数:
190
主要亮点:
1 ul 水平显示
2 li 去掉圆点
3 li中字体水平、竖直居中
4 li控制边框样式
5 使用html + css3 渐变画图 制作背景图片
6 更改颜色透明度
7 DIV制作边框阴影
先看效果图:
实现代码:
案例
...
分类:
Web程序 时间:
2015-09-22 20:36:20
阅读次数:
215
background-image:chrome浏览器:线性渐变支持较好,径向渐变支持不太好~通过png背景透明的方法,来决定要显示的部分。background-origina和background-clip 的区别:background-clip ,指的是裁剪的位置。其图片的开始位置是已经固定的,不...
分类:
Web程序 时间:
2015-08-31 13:21:15
阅读次数:
175
在应用 CSS3 渐变/动画时,有个控制时间的属性 。它的取值中除了常用到的三次贝塞尔曲线以外,还有个steps() 函数。
steps 函数指定了一个阶跃函数,第一个参数指定了时间函数中的间隔数量(必须是正整数);第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。
#demo {
animation-it...
分类:
Web程序 时间:
2015-08-16 18:27:04
阅读次数:
131
在以前,渐变效果和阴影、圆角效果一样都是做成图片,直接编写 CSS 代码就可以实现。现在的CSS3线性渐变(linear-gradient)技术也可以实现这样的效果喽!
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient,我们需要先...
分类:
Web程序 时间:
2015-08-13 14:29:56
阅读次数:
145
CSS3 3D渐变按钮代码Cross-browser CSS gradient buttonsButtonButtonButtonButtonButtonButtonButtonButtonButton
分类:
Web程序 时间:
2015-07-20 16:09:09
阅读次数:
168
CSS3 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向径向渐变(Radial Gradients)- 由它们的中心定义一、线性渐变:为了创...
分类:
Web程序 时间:
2015-07-20 01:18:48
阅读次数:
173