继续接着昨天的整理 【倒影】:用的不是很多 -webkit-box-reflect:below 20px -webkit-linear-gradient(rgba(0,0,0,0,),rgba(0,0,0,1)); 方向 和倒影之间的距离 倒影方向above（向上） below（向下） left（向 ...
分类：
Web程序 时间：
2016-10-15 07:39:19
阅读次数：
158
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核，主流内容主要有Mozilla（Gecko）（熟 ...
分类：
Web程序 时间：
2016-10-12 22:40:00
阅读次数：
161
在css3之前要想做背景色渐变就只能采用添加背景图片的方法，但是随着css3：linear-gradient属性的出现，就可以避免使用添加背景图片的方法，从而优化了性能。但是inear-gradient属性在ie9以下是无效的，但是可以采用ie滤镜的方法。 比如：黑色渐变到白色，代码如下： ie 滤 ...
分类：
Web程序 时间：
2016-10-11 11:52:30
阅读次数：
308
(-1)写在前面 我用的是chrome49，如果你用的不是。可以尝试换下浏览器前缀。IE在这方面的实现又特例独行了。不想提及…,这篇是为后续做准备。 (0)快速使用 background-image:-webkit-linear-gradient(red,blue); 或者 background-i ...
分类：
Web程序 时间：
2016-10-08 01:32:58
阅读次数：
221
<style> body{height:400px;border:1px solid #000;} .box{width:90px;height:30px;border:1px solid;border-radius:8px;background:linear-gradient(to top,red ...
分类：
Web程序 时间：
2016-10-04 11:51:23
阅读次数：
153
为了在移动端实现0.5像素的实线，以下是个人实践结果 1.通过background-image的渐变效果linear-gradient实现： 效果图： 2.通过border-image的边框背景图实现 效果图： ...
分类：
移动开发 时间：
2016-09-23 18:04:10
阅读次数：
395
通过CSS3的linear-gradient实现的 <div class="bg"></div> .bg{ width:300px; height:50px; background:#caca8c; background-image:-webkit-gradient(linear,50% 0,0 1 ...
分类：
Web程序 时间：
2016-09-18 15:23:30
阅读次数：
145
180deg 是线性渐变的角度,水平方向;如果是90deg,则是垂直方向. silver 20% 是最上面的颜色和该颜色所在的位置,可以为负值,,如 的效果是: 第二种参数: to left ,to top, to right, to left bottom, to left top, to rig ...
分类：
其他好文 时间：
2016-09-11 17:07:53
阅读次数：
130
第 22章 CSS3渐变效果学习要点：1.线性渐变2.径向渐变 本章主要探讨 HTML5中 CSS3背景渐变功能，主要有两种渐变方式：线性渐变和径向（放射性）渐变。 一．线性渐变 CSS3提供了linear-gradient属性实现背景颜色的渐变功能。在以前，这种效果必须采用图片才能实现的。首先，我 ...
分类：
Web程序 时间：
2016-09-09 20:51:12
阅读次数：
190
新增了透明功能: #box1{ width: 100px;height: 100px; background: linear-gradient(greenyellow,green); position: absolute;top: 120px;right: 100px;opacity: 0.5;bo ...
分类：
Web程序 时间：
2016-09-09 20:31:22
阅读次数：
320
