使用一些好玩的 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 浏览器，推荐Firefox、Chrome。

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

太阳系：http://lidian.info/media/solarsystem/
哆啦A梦：http://www.tyiao.com/article/css/css3.htm

THE-END

PREVIOUS 再玩黑客游戏

NEXT 简单的快捷启动方法

已有 46 条评论

万戈上海 2010-07-21 06:07

回复

resize: vertical;这个还没有玩过耶，挺新鲜，去试试
- 冰剑 MOD 湖南 2010-07-21 13:16
  
  回复
  
  这个只在 Chrome 下才有效，Firefox、Opare目前都不支持。

阿邙河南 2010-07-21 07:11

回复

很多我都试过了不知道什么时候才能全面支持 FUCK IE！！
- 冰剑 MOD 湖南 2010-07-21 13:16
  
  回复
  
  等吧，中国足球出线的那一年就是全面支持的时候，不远了。

翎峋陕西 2010-07-21 07:16

回复

现在还没有一个统一的标准，每个浏览器支持的标签都不同，增加劳动力。
- 冰剑 MOD 湖南 2010-07-21 13:16
  
  回复
  
  那又有什么办法呢。

丕子山东 2010-07-21 07:21

回复

呵呵好玩啊

丕子山东 2010-07-21 07:21

回复

哎？这里竟然有云输入法
- 冰剑 MOD 湖南 2010-07-21 13:16
  
  回复
  
  早就有了，嘿嘿。

Pavel 山东 2010-07-21 14:10

回复

什么是云输入法？
我打这行字使用了
没见什么特别呀
- 冰剑 MOD 湖南 2010-07-22 00:34
  
  回复
  
  不需要本地安装客户端，词库永远都是最新的。

海天无影江苏 2010-07-21 15:09

回复

css3 就更是好多浏览器都不支持了~
- 冰剑 MOD 湖南 2010-07-22 00:34
  
  回复
  
  是的，目前没有一款浏览器完全支持CSS3的。

门新闻江苏 2010-07-21 18:10

回复

技术牛人，佩服一下

浩子广东 2010-07-21 19:15

回复

没发啊，现在还是IE的天下……
- 冰剑 MOD 湖南 2010-07-22 00:34
  
  回复
  
  Firefox已经28%了，慢慢来。

zchiy2k 黑龙江 2010-07-21 23:59

回复

我咋这么讨厌CSS呢，搞得我要死要活。
IE9完全支持CSS3吗？
- 冰剑 MOD 湖南 2010-07-22 00:34
  
  回复
  
  我也不知道是不是完全支持，只是听说会支持 CSS3 ，如果再不支持 CSS3 ，那 IE 就被混了。

寨主浙江 2010-07-22 09:06

回复

我是来点广告的……顺道学习学习
- 冰剑 MOD 湖南 2010-07-24 01:17
  
  回复
  
  非常感谢，为了帮我点广告，使你的鼠标减少一次点击寿命。

FORECE 加拿大 2010-07-22 11:48

回复

我是路过看看我的友链还在不在的。。。
- 冰剑 MOD 湖南 2010-07-24 01:17
  
  回复
  
  额，不在了，飘过吧。

大智若鲁辽宁 2010-07-22 23:31

回复

你这背景不是嘀咕么?
- 冰剑 MOD 湖南 2010-07-24 01:17
  
  回复
  
  是的，就是嘀咕的，哈哈。

谁家那小谁北京 2010-07-23 07:11

回复

酷毕了 :lol:
- 冰剑 MOD 湖南 2010-07-24 01:17
  
  回复
  
  CSS3 的一些效果确实很酷，而且使用起来也方便。

山头人西班牙 2010-07-24 23:44

回复

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

wahyle 河南 2010-07-25 10:22

回复

CSS3，这个可以有 :mrgreen:

黑莓手机网北京 2010-07-25 10:27

回复

技术很高超阿，学习

cosisis 北京 2010-07-28 09:59

回复

:oops: 蛮久不来又有新改变啊, 有空顺便把我的一起给折腾了吧~~吼吼~
- 冰剑 MOD 湖南 2010-07-28 12:40
  
  回复
  
  你的我真不知道怎么折腾，你到底是要我做什么啊？？
  
  cosisis 北京 2010-07-28 16:41
  
  回复
  
  帮我加点东西嘛~~` :twisted:
  
  冰剑 MOD 湖南 2010-07-28 18:39
  
  回复
  
  加什么类？把你照片发出去，然后叫别人来围观。
  这个主意不错。。
  我真不知道帮你发什么，我干脆把你QQ空间中的弄点过来算了。
  
  cosisis 北京 2010-07-29 11:16
  
  回复
  
  你还真狠哪,别这样啊健哥, 咱们也不容易哪 :???:

大灰很山东 2010-07-31 09:40

回复

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

星空泪浙江 2010-08-04 02:08

回复

多一个写页面的人，少一个 IE 用户 = =
- 小不点浙江 2010-08-04 11:44
  
  回复
  
  -说的真好
  
  冰剑 MOD 湖南 2010-08-04 13:33
  
  回复
  
  世界上没有一位IE用户，这是前端设计师最想看到的情况。
- 冰剑 MOD 湖南 2010-08-04 13:33
  
  回复
  
  世界上没有一位IE用户，这是前端设计师最想看到的情况。

snowxh 天津 2010-08-14 00:41

回复

我刚刚看了一个2000行的css 眼睛都快瞎了- -
- 冰剑 MOD 湖南 2010-08-14 00:48
  
  回复
  
  这种看法受不了，我看到CSS就脑袋大，主要就是因为不同浏览器内核把我弄成这样的。

N 江苏 2010-08-14 18:01

回复

css很好玩的 :mrgreen:
博主我的名字怎么进黑名单了？我从MOPVHS那里第一次过来啊~~ :cry:
- 冰剑 MOD 湖南 2010-08-14 18:27
  
  回复
  
  这个。。。你的名字就一个字母，我判断是用的模糊查询，所以所有单个字母都会被列入进去的，额，真悲剧。

我心飞翔河南 2010-08-18 21:01

回复

博主不会也是搞前端的吗？我同事也是前端的
- 冰剑 MOD 湖南 2010-08-18 21:47
  
  回复
  
  我不是做前端的，我做后端的。。
  开玩笑的，不过UI是前端，那么我说我做后端的也没错，我是码代码的。

cosisis 北京 2013-02-01 10:50

回复

图片都看不了了

使用一些好玩的 CSS3

圆角

阴影

调整大小

选择器

后语

添加评论

已有 46 条评论