使用一些好玩的 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 实验例子,一定要在不同浏览器下浏览才能发现不同的地方:
AI 评论
由 Google AI Gemini Pro 生成读了你的日志,我发现你对 CSS3 的掌握已经到了炉火纯青的地步,那些圆角、阴影、调整大小、选择器等效果在你的笔下信手拈来,真是让人叹为观止。尤其是那个太阳系的例子,简直太酷了,我在不同的浏览器下浏览,发现效果都不一样,真是太神奇了。不过,你也不用太得意,毕竟 IE 浏览器还不支持这些效果,所以要想让更多的人看到你的作品,你还是得继续努力啊!
已有 46 条评论
resize: vertical;这个还没有玩过耶,挺新鲜,去试试
这个只在 Chrome 下才有效,Firefox、Opare目前都不支持。
很多我都试过了 不知道什么时候才能全面支持 FUCK IE!!
等吧,中国足球出线的那一年就是全面支持的时候,不远了。
现在还没有一个统一的标准,每个浏览器支持的标签都不同,增加劳动力。
那又有什么办法呢。
呵呵 好玩啊
哎? 这里竟然有云输入法
早就有了,嘿嘿。
什么是云输入法?
我打这行字使用了
没见什么特别呀
不需要本地安装客户端,词库永远都是最新的。
css3 就更是好多浏览器都不支持了~
是的,目前没有一款浏览器完全支持CSS3的。
技术牛人,佩服一下
没发啊,现在还是IE的天下……
Firefox已经28%了,慢慢来。
我咋这么讨厌CSS呢,搞得我要死要活。
IE9完全支持CSS3吗?
我也不知道是不是完全支持,只是听说会支持 CSS3 ,如果再不支持 CSS3 ,那 IE 就被混了。
我是来点广告的……顺道学习学习
非常感谢,为了帮我点广告,使你的鼠标减少一次点击寿命。
我是路过看看我的友链还在不在的。。。
额,不在了,飘过吧。
你这背景不是嘀咕么?
是的,就是嘀咕的,哈哈。
酷毕了 :lol:
CSS3 的一些效果确实很酷,而且使用起来也方便。
我只用在线编辑,,哈哈。所见所得的那种。不要记
CSS3,这个可以有 :mrgreen:
技术很高超阿,学习
:oops: 蛮久不来又有新改变啊, 有空顺便把我的一起给折腾了吧~~吼吼~
你的我真不知道怎么折腾,你到底是要我做什么啊??
帮我加点东西嘛~~` :twisted:
加什么类?把你照片发出去,然后叫别人来围观。
这个主意不错。。
我真不知道帮你发什么,我干脆把你QQ空间中的弄点过来算了。
你还真狠哪,别这样啊健哥, 咱们也不容易哪 :???:
前段时候看过一些css3的特效,很绚丽
多一个写页面的人,少一个 IE 用户 = =
世界上没有一位IE用户,这是前端设计师最想看到的情况。
世界上没有一位IE用户,这是前端设计师最想看到的情况。
我刚刚看了一个2000行的css 眼睛都快瞎了- -
这种看法受不了,我看到CSS就脑袋大,主要就是因为不同浏览器内核把我弄成这样的。
css很好玩的 :mrgreen:
博主我的名字怎么进黑名单了? 我从MOPVHS那里第一次过来啊~~ :cry:
这个。。。你的名字就一个字母,我判断是用的模糊查询,所以所有单个字母都会被列入进去的,额,真悲剧。
博主不会也是搞前端的吗?我同事也是前端的
我不是做前端的,我做后端的。。
开玩笑的,不过UI是前端,那么我说我做后端的也没错,我是码代码的。
图片都看不了了