首页 归档 标签 关于

使用一些好玩的 CSS3


762 2 167.5k

我居然会写关于 CSS 的东西,我这人最讨厌 CSS 了,望着它我脑袋就大了,不是这个浏览器不支持就是那个浏览器错位。Firefox、Chrome等非 IE 浏览器还马马虎虎能够忍受,最TM讨厌的IE我就受不了了,因为这家伙一直都不开窍。 关于 CSS3 我还是蛮喜欢的,因为简单的一句代码就可以实现以前很多的东西,比如圆角、阴影等等,下面写一些应用到本博客中的 CSS3 的技术。

圆角

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

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

阴影

还是拿图片做例子,CSS代码如下:

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

调整大小

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

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

选择器

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

效果看这里:

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

后语

这里除了最后一个选择器IE7、IE8支持意外,其他的 IE 都不支持,也就是说,你要看到那些效果,必须使用非 IE 浏览器,推荐FirefoxChrome

目前来说,Chrome支持的CSS3效果是最多的,Firefox相对较少,不过Firefox 4.0的支持很多。 最后给几个好玩的 CSS 实验例子,一定要在不同浏览器下浏览才能发现不同的地方: