大体思想是，设计一个透明层i，skewx在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变linear-gradient，然后hover的时候，设置0.5s的动画时间。 同时在 i 层使用 cursor:pointer，如果不设置这个的话，需要等透明层动画之后才能看得到 pointer 指 ...
分类：
Web程序 时间：
2016-11-29 14:08:37
阅读次数：
221
!--//渐变--> background: #f6b439; background: -moz-linear-gradient(top, #f6b439 0%, #825304 100%); background: -webkit-gradient(linear, left top, left b ...
分类：
其他好文 时间：
2016-11-29 07:14:11
阅读次数：
218
线性渐变 语法：background: linear-gradient(direction, color-stop1, color-stop2, ...); ...
分类：
其他好文 时间：
2016-11-22 12:29:43
阅读次数：
179
有时我们会看到网站上的一些图片是渐变色的，这些图片有的是ui设计出来的，有的则是直接通过css3制作出来的。下面就讲一下css3实现渐变色的方法，以及在各个浏览器上的兼容性。 CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们 ...
分类：
Web程序 时间：
2016-11-19 15:30:27
阅读次数：
316
background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);background: -ms-l ...
分类：
其他好文 时间：
2016-11-07 22:24:08
阅读次数：
150
如上图中间的那部分有点类似阴影的效果是用css3中的渐变（Gradients）来实现的 结构: 左边一个div，右边一个div。 样式: 左边一个背景为白色。 右边的div设置渐变属性: background:-webkit-linear-gradient(left,#dddddd,white);/ ...
分类：
其他好文 时间：
2016-11-07 14:17:53
阅读次数：
243
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0, ...
分类：
Web程序 时间：
2016-11-06 11:18:00
阅读次数：
199
CSS3背景渐变效果 学习要点： 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能，主要有两种渐变方式：线性渐变和径向 （放射性）渐变。 一．线性渐变 linear-gradient背景颜色的渐变功能 CSS3提供了linear-gradient属性实现背景颜色的渐变功能。在 ...
分类：
Web程序 时间：
2016-10-21 10:58:04
阅读次数：
345
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>表单布局</title><style>body{margin:0px;padding:0px;}#bj{margin:0pxauto;background:linear-gradient(totop,#fff20%,#0077ff99%);width:800px;height:900px;font-size:50..
分类：
其他好文 时间：
2016-10-20 01:14:35
阅读次数：
197
<!DOCTYPEhtml><htmllang="zh-cmn-Hans"><head> <metacharset="utf-8"/> <title></title> <style> .a{ width:1000px; height:500px; background-color:blue; background-p_w_picpath:linear-gradient(blue,white); /*bac..
分类：
其他好文 时间：
2016-10-20 00:50:19
阅读次数：
106
