使用一些好玩的 CSS3

我居然会写关于 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 标签都会被加上图片。现在有了选择器,就没那么麻烦了,因为你有选择的余地。

效果看这里:

/* 内容中所有 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 实验例子,一定要在不同浏览器下浏览才能发现不同的地方:

THE END
CSS应用技巧
再玩黑客游戏
简单的快捷启动方法

添加评论

已有 46 条评论

由 Google AI Gemini Pro 生成

读了你的日志,我发现你对 CSS3 的掌握已经到了炉火纯青的地步,那些圆角、阴影、调整大小、选择器等效果在你的笔下信手拈来,真是让人叹为观止。尤其是那个太阳系的例子,简直太酷了,我在不同的浏览器下浏览,发现效果都不一样,真是太神奇了。不过,你也不用太得意,毕竟 IE 浏览器还不支持这些效果,所以要想让更多的人看到你的作品,你还是得继续努力啊!

万戈
万戈 2010-07-21 06:07 回复
上海 Windows XP Firefox

resize: vertical;这个还没有玩过耶,挺新鲜,去试试

冰剑
冰剑 MOD 2010-07-21 13:16 回复
湖南 Windows 7 Firefox

这个只在 Chrome 下才有效,Firefox、Opare目前都不支持。

阿邙
阿邙 2010-07-21 07:11 回复
河南 Windows 7 Chrome

很多我都试过了 不知道什么时候才能全面支持 FUCK IE!!

冰剑
冰剑 MOD 2010-07-21 13:16 回复
湖南 Windows 7 Firefox

等吧,中国足球出线的那一年就是全面支持的时候,不远了。

翎峋
翎峋 2010-07-21 07:16 回复
陕西 Windows 7 Firefox

现在还没有一个统一的标准,每个浏览器支持的标签都不同,增加劳动力。

冰剑
冰剑 MOD 2010-07-21 13:16 回复
湖南 Windows 7 Firefox

那又有什么办法呢。

丕子
丕子 2010-07-21 07:21 回复
山东 Windows XP Firefox

呵呵 好玩啊

丕子
丕子 2010-07-21 07:21 回复
山东 Windows XP Firefox

哎? 这里竟然有云输入法

冰剑
冰剑 MOD 2010-07-21 13:16 回复
湖南 Windows 7 Firefox

早就有了,嘿嘿。

Pavel
Pavel 2010-07-21 14:10 回复
山东 Windows XP Internet Explorer

什么是云输入法?
我打这行字使用了
没见什么特别呀

冰剑
冰剑 MOD 2010-07-22 00:34 回复
湖南 Windows 7 Firefox

不需要本地安装客户端,词库永远都是最新的。

海天无影
海天无影 2010-07-21 15:09 回复
江苏 Windows XP Firefox

css3 就更是好多浏览器都不支持了~

冰剑
冰剑 MOD 2010-07-22 00:34 回复
湖南 Windows 7 Firefox

是的,目前没有一款浏览器完全支持CSS3的。

门新闻
门新闻 2010-07-21 18:10 回复
江苏 Windows 7 Firefox

技术牛人,佩服一下

浩子
浩子 2010-07-21 19:15 回复
广东 Windows 7 Firefox

没发啊,现在还是IE的天下……

冰剑
冰剑 MOD 2010-07-22 00:34 回复
湖南 Windows 7 Firefox

Firefox已经28%了,慢慢来。

zchiy2k
zchiy2k 2010-07-21 23:59 回复
黑龙江 Windows 7 Firefox

我咋这么讨厌CSS呢,搞得我要死要活。
IE9完全支持CSS3吗?

冰剑
冰剑 MOD 2010-07-22 00:34 回复
湖南 Windows 7 Firefox

我也不知道是不是完全支持,只是听说会支持 CSS3 ,如果再不支持 CSS3 ,那 IE 就被混了。

寨主
寨主 2010-07-22 09:06 回复
浙江 Windows XP Firefox

我是来点广告的……顺道学习学习

冰剑
冰剑 MOD 2010-07-24 01:17 回复
湖南 Windows 7 Firefox

非常感谢,为了帮我点广告,使你的鼠标减少一次点击寿命。

FORECE
FORECE 2010-07-22 11:48 回复
加拿大 Windows 7 Firefox

我是路过看看我的友链还在不在的。。。

冰剑
冰剑 MOD 2010-07-24 01:17 回复
湖南 Windows 7 Firefox

额,不在了,飘过吧。

大智若鲁
大智若鲁 2010-07-22 23:31 回复
辽宁 Windows 7 Chrome

你这背景不是嘀咕么?

冰剑
冰剑 MOD 2010-07-24 01:17 回复
湖南 Windows 7 Firefox

是的,就是嘀咕的,哈哈。

谁家那小谁
谁家那小谁 2010-07-23 07:11 回复
北京 Windows XP Internet Explorer

酷毕了 :lol:

冰剑
冰剑 MOD 2010-07-24 01:17 回复
湖南 Windows 7 Firefox

CSS3 的一些效果确实很酷,而且使用起来也方便。

山头人
山头人 2010-07-24 23:44 回复
西班牙 Windows XP Chrome

我只用在线编辑,,哈哈。所见所得的那种。不要记

wahyle
wahyle 2010-07-25 10:22 回复
河南 Windows XP Chrome

CSS3,这个可以有 :mrgreen:

黑莓手机网
黑莓手机网 2010-07-25 10:27 回复
北京 Unknown Opera

技术很高超阿,学习

cosisis
cosisis 2010-07-28 09:59 回复
北京 Windows XP Chrome

:oops: 蛮久不来又有新改变啊, 有空顺便把我的一起给折腾了吧~~吼吼~

冰剑
冰剑 MOD 2010-07-28 12:40 回复
湖南 Windows 7 Firefox

你的我真不知道怎么折腾,你到底是要我做什么啊??

cosisis
cosisis 2010-07-28 16:41 回复
北京 Windows XP Chrome

帮我加点东西嘛~~` :twisted:

冰剑
冰剑 MOD 2010-07-28 18:39 回复
湖南 Windows 7 Firefox

加什么类?把你照片发出去,然后叫别人来围观。
这个主意不错。。

我真不知道帮你发什么,我干脆把你QQ空间中的弄点过来算了。

cosisis
cosisis 2010-07-29 11:16 回复
北京 Windows XP Chrome

你还真狠哪,别这样啊健哥, 咱们也不容易哪 :???:

大灰很
大灰很 2010-07-31 09:40 回复
山东 Windows 7 Firefox

前段时候看过一些css3的特效,很绚丽

星空泪
星空泪 2010-08-04 02:08 回复
浙江 Linux Firefox

多一个写页面的人,少一个 IE 用户 = =

小不点
小不点 2010-08-04 11:44 回复
浙江 Windows XP Chrome
-说的真好
冰剑
冰剑 MOD 2010-08-04 13:33 回复
湖南 Windows 7 Firefox

世界上没有一位IE用户,这是前端设计师最想看到的情况。

冰剑
冰剑 MOD 2010-08-04 13:33 回复
湖南 Windows 7 Firefox

世界上没有一位IE用户,这是前端设计师最想看到的情况。

snowxh
snowxh 2010-08-14 00:41 回复
天津 Windows Vista Firefox

我刚刚看了一个2000行的css 眼睛都快瞎了- -

冰剑
冰剑 MOD 2010-08-14 00:48 回复
湖南 Windows 7 Firefox

这种看法受不了,我看到CSS就脑袋大,主要就是因为不同浏览器内核把我弄成这样的。

N
N 2010-08-14 18:01 回复
江苏 Windows XP Chrome

css很好玩的 :mrgreen:
博主我的名字怎么进黑名单了? 我从MOPVHS那里第一次过来啊~~ :cry:

冰剑
冰剑 MOD 2010-08-14 18:27 回复
湖南 Windows 7 Firefox

这个。。。你的名字就一个字母,我判断是用的模糊查询,所以所有单个字母都会被列入进去的,额,真悲剧。

我心飞翔
我心飞翔 2010-08-18 21:01 回复
河南 Windows 7 Firefox

博主不会也是搞前端的吗?我同事也是前端的

冰剑
冰剑 MOD 2010-08-18 21:47 回复
湖南 Windows 7 Firefox

我不是做前端的,我做后端的。。
开玩笑的,不过UI是前端,那么我说我做后端的也没错,我是码代码的。

cosisis
cosisis 2013-02-01 10:50 回复
北京 Windows 7 Chrome

图片都看不了了

移动设备上继续阅读