这些图片都是用一个DIV绘制出来的，其实原理并不复杂。 这些图片都是由CSS绘制出来的，通过background-image叠加实现， 如蘑菇头的实现，通过radial-gradient 径向渐变,linear-gradient 线性渐变相互叠加实现，如：123456789101112div {.....
分类：
Web程序 时间：
2014-09-01 10:36:12
阅读次数：
199
/* 线性渐变 */div.radial {width: 600px;height: 100px;margin: 30px auto;border: 1px #f00 solid;background: -webkit-gradient(linear, 0 0, 0 100%, from(yello...
分类：
Web程序 时间：
2014-08-30 17:36:40
阅读次数：
356
全兼容 渐变效果 头颜色#F3A8A8 尾颜色#e23b2ebackground: #F3A8A8; /* Old browsers */background: -moz-linear-gradient(top,#F3A8A8,#e23b2e);/*FF 3.6+ */background: -we...
分类：
Web程序 时间：
2014-08-28 14:39:09
阅读次数：
180
/* 径向渐变 */div.radial { width: 600px; height: 400px; margin: 30px auto; border: 1px #f00 solid; background-image: -webkit-gradient(radial,50% 50%,0, 50...
分类：
Web程序 时间：
2014-08-28 00:51:18
阅读次数：
1260
一、背景色渐变背景色渐变可以通过在res/drawable中定义一个XML文件实现，gradient.xml的代码如下：<?xmlversion="1.0"encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"><gradientandroid:startColor="#FFFFFF"android:end..
分类：
移动开发 时间：
2014-08-27 18:59:29
阅读次数：
257
今天总结渐变的问题，渐变分为线性渐变、径向渐变。呼呼，废话少说，线性渐变：background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色);Linear:渐变的类型（线性渐变）；渐变的形式：可选参数 有两种方式-1、设置旋转角度，0度代表水...
分类：
Web程序 时间：
2014-08-26 19:15:46
阅读次数：
331
一、线性渐变在 Mozilla 下的应用 语法：1 -moz-linear-gradient( [ || ,]? , [, ]* )参数：其共有三个参数，第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。第二个和第三个参数....
分类：
Web程序 时间：
2014-08-22 12:42:56
阅读次数：
17927
在web开发中,难免会遇到浏览器之间的兼容问题，关于Css设置颜色渐变下面有解决的办法，直接上代码： 适用于谷歌浏览器： background: -webkit-gradient(linear, 0 0, 0 100%, from(#4285fa), to(#366dcb)); from:...
分类：
Web程序 时间：
2014-08-22 10:35:55
阅读次数：
254
Android实现iphone样式的对话框，主要是借助shape，corner元素方法。下面的circular_corner_dialog.xml文件定义了一个圆角矩形。corner元素指定了圆角矩形的圆角半径，而gradient元素则指定了色彩渐变的方向以及起始颜色。当然也可以使用shape创建其...
分类：
移动开发 时间：
2014-08-19 18:24:45
阅读次数：
243
.top_nav {width:100%;height:29px;/* 如果浏览器不支持渐变，使用图像作为背景 */background:url(gradient.jpg);/* Webkit: Safari 4-5, Chrome 1-9 */background: -webkit-gradien...
分类：
Web程序 时间：
2014-08-15 19:23:09
阅读次数：
253
