冰剑博客

我居然会写关于 CSS 的东西，我这人最讨厌 CSS 了，望着它我脑袋就大了，不是这个浏览器不支持就是那个浏览器错位。Firefox、Chrome等非 IE 浏览器还马马虎虎能够忍受，最TM讨厌的IE我就受不了了，因为这家伙一直都不开窍。

关于 CSS3 我还是蛮喜欢的，因为简单的一句代码就可以实现以前很多的东西，比如圆角、阴影等等，下面写一些应用到本博客中的 CSS3 的技术。

圆角

这个算是目前使用比较多的 CSS3 技术，这里就拿图片做例子，CSS代码如下：

.post .content img {
	border:1px solid #D9D9D9;
	padding:5px;
	-moz-border-radius: 5px;/* 支持火狐的 */
	-webkit-border-radius: 5px;/* 支持Chrome的 */
	/* 属性值代表圆角的半径值，如果写上四个的话顺序分别是左上、右上、右下、左下 */
}

阴影

还是拿图片做例子，CSS代码如下：

.post .content img {
	border:1px solid #D9D9D9;
	padding:5px;
	-moz-box-shadow: 3px 3px 5px #ccc;
	-webkit-box-shadow: 3px 3px 5px #ccc;
	/* 属性值分别为：水平的值、垂直的值、模糊度、阴影颜色 */
}

调整大小

这个功能有的浏览器中应该自带就有，Chrome就有，但是用了这个属性后任何支持这个属性的浏览器就都会有这功能。

#commentform #comment{
	resize: vertical;/* 有三个属性值：both、horizontal、 vertical*/
	overflow: auto;/* 不知道作用是什么，反正要留着 */
}

选择器

不看不知道，一看吓一跳，原来 CSS3 也有选择器，jQuery 的选择器用起来真的很爽，只要页面上有的元素，都可以揪出来。你想想，如果你要添加一个功能，是给日志中的外链加上一个图片来提醒，按照平常的做法，只要是内容中的 a 标签都会被加上图片。现在有了选择器，就没那么麻烦了，因为你有选择的余地。

效果看这里：本站链接丨站外链接丨JS 连接，千万别点

.post .content a:not([href*="javascript"]){/* 内容中所有 a 标签，但不包括 href 包含 javascript 的 a 标签 */
  background:url(img/externalLink.gif) no-repeat scroll right top transparent;
  margin-right: 5px;
  padding-right: 10px;
}
.post .content a[href*="binjoo.net"]{/* 内容中 a 标签 href 包含有 binjoo.net 的 a 标签  */
  background:none;
  margin-right: 0px;
  padding-right: 0px;
}
/* 第二个选择器让我很纠结，我记得是可以一次写多个选择器进去的，但是怎么试都试不出效果，郁闷 */

后语

这里除了最后一个选择器IE7、IE8支持意外，其他的 IE 都不支持，也就是说，你要看到那些效果，必须使用非 IE 浏览器，推荐Firefox、Chrome。目前来说，Chrome支持的CSS3效果是最多的，Firefox相对较少，不过Firefox 4.0的支持很多。

最后给几个好玩的 CSS 实验例子，一定要在不同浏览器下浏览才能发现不同的地方：
太阳系：http://lidian.info/media/solarsystem/
哆啦A梦：http://www.tyiao.com/article/css/css3.htm