-
我居然会写关于 css 的东西，我这人最讨厌 css 了，望着它我脑袋就大了，不是这个浏览器不支持就是那个浏览器错位。firefox、chrome等非 ie 浏览器还马马虎虎能够忍受，最tm讨厌的ie我就受不了了，因为这家伙一直都不开窍。
关于 css3 我还是蛮喜欢的，因为简单的一句代码就可以实现以前很多的东西，比如圆角、阴影等等，下面写一些应用到本博客中的 css3 的技术。
圆角这个算是目前使用比较多的 css3 技术，这里就拿图片做例子，css代码如下：点击隐藏css code.post .content img
border:1px solid #d9d9d9;
padding:5px;
-moz-border-radius: 5px;/* 支持火狐的 */
-webkit-border-radius: 5px;/* 支持chrome的 */
/* 属性值代表圆角的半径值，如果写上四个的话顺序分别是左上、右上、右下、左下 */阴影还是拿图片做例子，css代码如下：点击隐藏css code.post .content img
border:1px solid #d9d9d9;
padding:5px;
-moz-box-shadow: 3px 3px 5px #ccc;
-webkit-box-shadow: 3px 3px 5px #ccc;
/* 属性值分别为：水平的值、垂直的值、模糊度、阴影颜色 */调整大小这个功能有的浏览器中应该自带就有，chrome就有，但是用了这个属性后任何支持这个属性的浏览器就都会有这功能。点击隐藏css code#commentform #comment
resize: vertical;/* 有三个属性值：both、horizontal、 vertical*/
overflow: auto;/* 不知道作用是什么，反正要留着 */选择器
不看不知道，一看吓一跳，原来 css3 也有选择器，jquery 的选择器用起来真的很爽，只要页面上有的元素，都可以揪出来。你想想，如果你要添加一个功能，是给日志中的外链加上一个图片来提醒，按照平常的做法，只要是内容中的 a 标签都会被加上图片。现在有了选择器，就没那么麻烦了，因为你有选择的余地。
效果看这里：本站链接丨站外链接丨js 连接，千万别点点击隐藏css code.post .content a:nothref*=javascript/* 内容中所有 a 标签，但不包括 href 包含 javascript 的 a 标签 */
background:urlimg/externallink.gif no-repeat scroll right top transparent;
margin-right: 5px;
padding-right: 10px;.post .content ahref*=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
1月前 足迹binjoo
增值电信业务经营许可证 沪B2-20100031
