CSS3 background-size让背景图寸尺大小可控
作者:飘零雾雨 日期:2010-08-05
转载请注明出处：css探索之旅；本文地址：CSS3 background-size让背景图寸尺大小可控
background-size是CSS3提供的一个新特性，它可以让你随心所欲的控制背景图的尺寸大小。先简要的看看background-size的用法。我们知道在CSS2中，背景图的大小在样式中是不可控的，比如要想使得背景图填充满某个区域，你要么重新做帐大点的图，要么就只能让它以平铺的方式来填充。
如今background-size让你既可以直接缩放背景图来填充满这个区域，也可以让你先给背景图设置大小，然后以设置好的尺寸去平铺满这个区域。
一起来认识认识background-size吧。
background-size的值类型：
Tags: background-size background 背景图寸尺 css3
CSS3 background-image允许你使用多背景图
作者:飘零雾雨 日期:2010-07-30
转载请注明出处：css探索之旅；本文地址：CSS3 background-image允许你使用多背景图
如果尚未对CSS3有一定的了解，相信你还会为要给同一个元素设置多个背景图而头痛。于是就衍生出一些使用伪对象来实现的解决方案，如使用:first-letter，:first-line，:befor，:after等；又或是使用多个无意义标记堆叠来实现；又或是其它的什么方法。
当然，方法没有错误，有的只是寻求最适合和最简单的。
相信在CSS3 multiple background-image尚未出现之前，亦没有人会说自己的某某方法是最佳的，有的只是满足需求的一些变通方案（即使是在现在这种CSS3尚未被所有浏览器支持的情况下，是否要在项目中使用multiple background-image，也是你必须要考虑的问题)。
所谓有需求就会有变化，也许正是基于这样或那样的考虑，background-image终于将多背景图纳入了自己势力的范围之内。
Tags: background-image background 多背景图 css3
CSS3 RGBA不是简单的RGB与opacity相加
作者:飘零雾雨 日期:2010-07-27
转载请注明出处：css探索之旅；本文地址：CSS3 RGBA不是简单的RGB与opacity相加
“有了新盖中盖高钙片，一片顶过去五片，高钙片，水果味，一个片嘣五楼，不费劲儿！”
这句广告词估计大家都早已烂熟于胸，多年的狂轰乱炸，想记不住也是不可能的。比起新盖中盖高钙片广告词中的神效，CSS3 RGBA之与RGB又或HEX，应该可以对等。
为什么要这么说？想想不使用CSS3，我们一直是如何满足“背景透明，文字（内容）不透明”这种需求的？
例如现在有个需求：
- 有个长300px，高100px的div在body为红色的页面中；
- 该div拥有不透明度为50%的黑色背景颜色；
- 该div内容不允许出现半透明效果，且文字为白色。
CSS3 box-shadow阴影之美
作者:飘零雾雨 日期:2010-07-25
转载请注明出处：css探索之旅；本文地址：CSS3 box-shadow阴影之美
与圆角border-radius属性一样，盒阴影box-shadow也是一个令人激动的属性。
W3C将box-shadow加入CSS3属性列表，并使其标准化，应该是件值得高兴的事。也许，从此你再也不会因为“实现代价”而与设计师争得脸红。
那么，box-shadow究竟是如何被人们所称道的？
如果你是前端工程师，你可能有过这些痛苦的经历：
- 面对到处都是圆角的设计稿；
- 面对到处都是圆角+阴影的设计稿；
- 面对到处都是圆角+阴影+半透明的设计稿。
Tags: box-shadow css3
CSS3 border-image边框的华彩外衣
作者:飘零雾雨 日期:2010-07-20
转载请注明出处：css探索之旅；本文地址：CSS3 border-image边框的华彩外衣
得益于CSS3，现如今边框（border）也颇具可玩性了。它正在慢慢摆脱只能设置纯色，只能是规规矩矩的矩形的约束，穿上一件华彩的外衣。
当然，无图无真相，只说不做难以令人信服。那就先上个图吧。
Figure 1: 自适应大小的边框
相信类似Figure 1图示的效果，大家都不会陌生。并且，很多人为做类似的效果还颇费了一番功夫。css sprites自是不必多说，肯定是要用到的，为了实现它，同时还要“绑架“好些个标签。是不是有人要说，我只要一个标签照样可以实现？我想说，若不借力于CSS3，你做不到，因为需求是这个边框会随着内容的大小改变而改变，而并非大小固定。
Tags: border-image border css3
双线框之CSS3 VS. CSS1
作者:飘零雾雨 日期:2010-07-15
转载请注明出处：css探索之旅；本文地址：双线框之CSS3 VS. CSS1
初看标题，你可能还反应不过来什么是“双线框”。没关系，因为这个叫法可能只是我“杜撰”的，或许它有其它的叫法，不过不必深究。
我想，如果有张图来让你看到什么是我所谓的“双线框”，那么，接下来应该可以让你我的距离拉近一些。
Figure 1: 常规双线框
有了Figure 1的图示，估计很多人已想到了实现该图效果的方法。是的，就算没有CSS3，实现这样的效果也是信手拈来。
Tags: double-border 双线框 border css3 css1
CSS3 border-colors创建惊艳多重边框色
作者:飘零雾雨 日期:2010-07-10
转载请注明出处：css探索之旅；本文地址：CSS3 border-colors创建惊艳多重边框色
是的，我们知道：我们可以为border设置它的width，这个border的宽度可以是5px，可是10px，可以是20px，可以是随意数值。
可是，你想象过可以为每1px的border单独设置颜色么？这是个什么概念？就是说，如果你为一个元素设置了10px的border，那么这10px的边框区域，你可以为它设置10种颜色。每1px是一重（一组）。DEMO：css3 border-colors多组边框色详解
恩，让我们来回味下如何为元素设置边框大小（代码块一）：
.test{
border:6px solid #000;
}
<div class="test">测试border颜色设置</div>上面的代码表示我们为一个className为test的div元素定义了6px的边框，当然，这是一个矩形，包括有4条边。
HTML5正渐行渐近
作者:飘零雾雨 日期:2010-07-05
转载请注明出处：css探索之旅；本文地址：HTML5正渐行渐近
如果你关注HTML5，且你是个web前端开发人员，那你就能感受到HTML5给业界带来的热力和激烈讨论，犹如在炎炎夏日点起一堆熊熊大火。
随着各大浏览器商纷纷宣布对HTML5的支持，并迅速对自家产品进行升级，更是将HTML5推上了峰尖浪头。
那么HTML5究竟有何魅力？又该怎样开始HTML5呢？
HTML5的吸引力在于新增了很多新标签，实现了很多新特性。如直接用video标签播放视频文件，用audio播放音频文件，用canvas绘制图形图像和制作动画，新的表单控件，对本地离线存储的更好的支持等等，这些新特性应该基于HTML、CSS、DOM以及JavaScript。
CSS3 border-radius圆角的优雅实现
作者:飘零雾雨 日期:2010-07-01
转载请注明出处：css探索之旅；本文地址：CSS3 border-radius圆角的优雅实现
在css3尚未真正普及前，我们要实现圆角效果，还是需要颇费苦心的。一方面需要照顾还占有强势地位的低版本IE用户群，另一方面由于css3目前还属草案阶段，有些浏览器暂且以私有属性的方式去实现css3的一些东西。如目前的Firefox3.6.6实现圆角，就必须使用私有属性-moz-border-radius。
所有的这些，让我们看到，圆角的标准化实现目前还处理尤抱琵琶半遮面的阶段。不过，曙光已现，只待w3c加快推进css3的进程和IE9或更高版本IE的推出。
到那时，至于还在使用低版本IE的用户，你或许可以强势点，不兼顾这个群体；又或许你可以采取优雅降级的方式，给低版本IE用户一个“普通版”；再不然，你也可以单独为低版本IE另做一份。相信可以找到一个适合你的处理方式。
这是闲话，点到即止。接下来，还是让我们来看看标准化的圆角实现。DEMO：css3 border-radius圆角详解
Tags: 圆角 border-radius radius border css3
