摘要：本文地址：http://www.zhangxinxu.com/wordpress/?p=711一、无关紧要碎碎念在web页面的ui表现中，投影效果可以说是非常常见的一种表现效果了。例如开心网的头像修饰效果：然而，在CSS2的时代，我们多半使用图片实现类似效果，或是使用CSS其他属性模拟阴影效果，但是，现在，CSS3的崛起使得这个问题已经不再是是个问题了，本文就将展示如何实现跨浏览器的盒阴影效果。二、标准方法标准方法当然就是指使用CSS3的方法了，这个应该不少同行应该知道，参见如下代码：.shadow { -moz-box-shadow: 3px 3px 4px #000; -web... 阅读全文

摘要：本文地址：http://www.zhangxinxu.com/wordpress/?p=727原文地址：http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/原文作者：Alix Franquet翻译作者：张鑫旭一、引子Firefox3.6包含了许多CSS的改进，本文将向您展示如果使用CSS渐变。如果你正在运行的Firefox 3.6的最新测试版，你应该看看我们的互动演示，并查看相应的代码。使用单选按钮来切换不同的样式选项。二、含CSS渐变的背景(backgrounds)背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜 阅读全文

摘要：本文地址：http://www.zhangxinxu.com/wordpress/?p=734一、关于渐变渐变是一种应用于平面的视觉效果，可以从一种颜色逐渐地转变成另外一种颜色，故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。例如，您可以指定一个这么一个渐变：顶部的颜色是红色，中间的是蓝色，底部为黄色来作为div的背景色。渐变通过-webkit-gradient方法实现，可以用来代替图片URL。在webkit核心浏览器下(Safari4+, Chrome)，有两种类型的渐变，线性的和径向的。您还可以指定多个中间过渡色，此称之为color stops.二、基本语法webkit核心 阅读全文

摘要：本文地址：http://www.zhangxinxu.com/wordpress/?p=743一、有点俗态的开场白要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不支持Opera浏览器。本文实例效果都是同样的效果，就是垂直渐变，起始颜色红色，结束颜色蓝色，结束的蓝色的透明度是0.5。二、IE浏览器下的渐变背景IE浏览器下渐变背景的使用需要使用IE的渐变滤镜。如下代码 阅读全文