1、一方法一借助maskimage属性如果您手头上的浏览器是Chrome或是Safari，则您可以在demo页面中看到类似下面的效果相应的HTML代码如下codeh2 class=quottextgradientquot datatext=quot天赐美妞quot天赐美妞h2codebutton；1启动DW软件，新建一个网页文件，在body中添加一个 标签，然后给他一定CSS样式，width300pxheight200pxbackground#ff0000我们可以看到填充了背景色为红色2然后我们添加线性渐变代码backgroundwebkitlinear；现在由我来向大家介绍一下在css3中如何使用transition属性和hover属性实现div颜色渐变和放大缩小的效果css3中transition属性transition属性是一个简写属性，用于四个过度属性，分别是transitionproperty，transitionduration。

2、html部分ltdiv class=quotboxquotltdiv css部分boxwidth 500px height 50pxbackground webkitlineargradientto right，#17c864，#3fccf0background mozlineargradientto right，#17c864，#3fcc；其次，由于用了moz前缀，所以只有运行于火狐浏览器才有效如果想运行于webkit内核的浏览器比如ChromeSafari，则改为 backgroundwebkitlineargradienttop，blue，red至于IE指低版本的，由于不支持css3，就只能。

3、需要准备的材料分别有电脑浏览器html编辑器1首先，打开html编辑器，新建html文件，例如indexhtml2在indexhtml中的ltstyle标签中，输入css代码button width 100px height 50pxborder 0color；通过定义一系列与盒子相关的属性，可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构CSS盒子模型由内容区填充边框和空白边四部分组成内容区是盒子模型的中心，呈现盒子的主要信息内容填充是内容区和边框；使用渐变色background lineargradientto right左右到右，写为bottom就是从上到下， 开始的颜色，结束的颜色；1图片渐变切图时一定要以最小为准则，例如在做垂直方向的纯颜色的渐变时，尝试使用1个像素的竖直图片作为渐变背景“最小单元”另外，要注意css3虽然支持很多的浏览器的兼容，但是目前不支持Opera浏览器2如果兼容程度。

4、3在testhtml文件内，直接在font标签上，通过color属性来设置字体的颜色例如，设置font字体的颜色为红色4在testhtml文件内，设置font标签的class属性为myclass，主要用于下面通过该class来设置css样式5在；这个为啥要用边框呀我的天，两个大小不同的圆进行重叠就行了，下面的黑色大点，上面的白色小点，然后在大圆的左下角，就是一个大盒子包裹一个小盒子很简单的；详细内容请参考 CSS中渐变特性的研究 在绝对定位的情况下，如果元素没有设置宽度width，且设置了left和right，则元素的宽度width会被属性left和right伸缩，即元素真实的宽度width会适合于left和right的值同样，对于元素的；很简单，css里设置body背景为渐变，渐变方向从左到右，两种颜色渐变，渐变比为50%，把右边的颜色设置为透明或白色即可；ltdiv style=quotwidth300pxheight 75pxbackgroundurlimgbackindex_22png norepeat 0 225px opacity 02backgroundsize100%quotltdiv 思路是这样，但看着不对劲，可能是背景颜色的问题，css渐变只能；lthtml lthead ltmeta charset=quotUTF8quot lttitlelttitle ltstyle type=quottextcssquot demo width200pxheight10pxbackgroundwebkitlineargradientleft， rgb80，80，255，02 ， #fff * Safari 5；看图，多个div叠在一起，可以达到你这个效果。