Posts Tagged ‘CSS3’

哆啦A梦告诉你目前各家浏览器对 CSS3 的支持状况

五月 16th, 2010

原文于http://www.cnbeta.com/articles/111225.htm；但例子要翻墙，我特意转载，方便没梯子的童鞋。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>哆啦A梦告诉你目前各家浏览器对 CSS3 的支持状况</title> <style type="text/css"> body{ background:#fff; } #doraemon{ position:relative; margin:50px; } #head_light{ width:50px; height:50px; transform: rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); box-shadow:80px 20px 50px #fff; -webkit-box-shadow:80px 20px 55px #fff; -moz-box-shadow:80px 20px 50px #fff; border-radius:45px; -webkit-border-radius:45px; -moz-border-radius:60px; position:absolute; top:-20px; left:170px; opacity:0.5 } #face{ position:relative; width:310px; height:300px; border-radius:146px; -webkit-border-radius:146px; -moz-border-radius:146px; background:#07beea; background: -webkit-gradient(linear, right top, left bottom, from(#fff) ,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95, #000), to(#444)); background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); border:#333 2px solid; top:-15px; box-shadow:-5px 10px 15px rgba(0,0,0,0.45); -webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45); -moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45); } #base{ position:relative; top:-5px; } #base_white{ position:absolute; border:#000 2px solid; width:264px; height:196px; border-radius: 150px 150px; -webkit-border-radius: 150px 150px; -moz-border-radius: 150px 150px; background:#FFF; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000)); background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); z-index:1; top:85px; left:22px; } #eyes{ position:relative; top:-5px; } div.eye{ position:absolute; border-radius: 35px 35px; -webkit-border-radius: 35px 35px; -moz-border-radius: 35px 35px; border:2px solid #000; width:72px; height:83px; z-index:20; background:#fff; } div.black_eye{ position:absolute; width:15px; height:15px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; background:#333; z-index:21; -webkit-animation-name: cate; -webkit-animation-duration: 10s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 200; } @-webkit-keyframes cate{ 0%{ margin:0 0 0 0; } 80% { margin:0px 0 0 0; } 85% { margin:-20px 0 0 0; } 90%{ margin:0 0 0 0; } 93%{ margin:0 0 0 7px; } 96%{ margin:0 0 0 0; } 100%{ margin:0 0 0 0; } } div.black_left{ top:100px; left:130px; } div.black_right{ top:100px; left:170px; } div.eye_left{ top:45px; left:82px; } div.eye_right{ top:45px; left:156px; } #nose{ width:32px; height:32px; border:2px solid #000; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; background:#c93e00; position:absolute; top:117px; left:139px; z-index:30; } #nose_light{ width:10px; height:10px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; box-shadow:19px 8px 5px #fff; -webkit-box-shadow:19px 8px 5px #fff; -moz-box-shadow:19px 8px 5px #fff; position:relative; top:0px; left:0px; } #nose_line{ background:#000; width:4px; height:100px; top:125px; left:156px; position:absolute; } #nose_line{ background:#333; width:3px; height:100px; top:140px; left:155px; position:absolute; z-index:20; } #mouth{ width:240px; height:500px; border-bottom:3px solid #333; border-radius:120px; -webkit-border-radius:120px; -moz-border-radius:120px; position:absolute; top:-263px; left:36px; z-index:10; } #mouth_rewrite{ background:#fff; width:240px; height:90px; position:relative; top:115px; left:35px; z-index:12; border-radius:45px; -webkit-border-radius:45px; -moz-border-radius:60px; } #firefox_mouth, x:-moz-broken, x:last-of-type, x:indeterminate { position:relative; width:170px; height:150px; -moz-border-radius:85px; border:3px solid #000; background:#FFF; z-index:11; top:-3px; left:70px; } .whiskers{ background:#333; height:2px; width:60px; position:absolute; z-index:20; } .whi_right{ top:165px; left:210px; } .whi_right_top{ top:145px; left:210px; } .whi_right_bottom{ top:185px; left:210px; } .whi_left{ top:165px; left:50px; } .whi_left_top{ top:145px; left:50px; } .whi_left_bottom{ top:185px; left:50px; } .rotate20{ transform: rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); } .rotate160{ transform: rotate(160deg); -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -o-transform: rotate(160deg); } #choker{ position:relative; top:-55px; left:35px; z-index:100; } #belt{ width:230px; height:20px; border:#000 solid 2px; background:#ca4100; background: -webkit-gradient(linear, left top, left bottom, from(#ca4100), to(#800400)); background: -moz-linear-gradient(top, #ca4100, #800400); border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; position:relative; left:5px; } #bell{ width:40px; height:40px; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; border:2px solid #000; background:#f9f12a; background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100)); background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); box-shadow:-5px 5px 10px rgba(0,0,0,0.25); -webkit-box-shadow:-5px 3px 5px rgba(0,0,0,0.25); -moz-box-shadow:-5px 5px 10px rgba(0,0,0,0.25); position:relative; top:-15px; left:100px; } #bell_line{ width:36px; height:2px; background:#f9f12a; border:#333 solid 2px; position:relative; top:10px; } #bell_circle{ width:12px; height:10px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; background:#000; position:relative; top:14px; left:14px; } #bell_under{ width:3px; height:15px; background:#000; position:relative; top:10px; left:18px; } #bell_light{ width:10px; height:10px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; box-shadow:19px 8px 5px #fff; -webkit-box-shadow:19px 8px 5px #fff; -moz-box-shadow:19px 8px 5px #fff; position:relative; opacity:0.7; top:-35px; left:5px; } #doutai{ position:absolute; width:220px; height:165px; background:#07beea; background: -webkit-gradient(linear, right top, left top, from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be)); background: -moz-linear-gradient(right, #07beea, #0073b3 50%,#0096be 75%,#00b0e0 ,#0096be 100% ,#333 114%); border:#333 2px solid; top:262px; left:46px; } div.base_white2{ position:absolute; width:170px; height:170px; border-radius:85px; -webkit-border-radius:85px; -moz-border-radius:85px; border:2px solid #000; background:#FFF; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000)); background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); } .doutai_center{ top:230px; left:72px; } #circle{ position:relative; width:130px; height:130px; border-radius:65px; -webkit-border-radius:65px; -moz-border-radius:65px; background:#fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff)); background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff); border:2px solid #000; top:-120px; left:92px; } #circle_rewrite{ position:relative; width:134px; height:60px; background:#fff; border-bottom:2px solid #000; top:-250px; left:92px; } #hand_right{ position:absolute; top:272px; left:248px; width:100px; height:100px; } #arm_right{ position:relative; width:80px; height:50px; background:#07beea; background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555)); background: -moz-linear-gradient(top, #07beea, #07beea 85%, #555); border:solid 1px #000; z-index:-1; top:17px; transform: rotate(35deg); -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -o-transform: rotate(35deg); box-shadow:-10px 7px 10px rgba(0,0,0,0.35); -webkit-box-shadow:-10px 7px 10px rgba(0,0,0,0.35); -moz-box-shadow:-10px 7px 10px rgba(0,0,0,0.35); } #hand_left{ position:absolute; top:272px; left:-46px; width:100px; height:100px; } #arm_left{ position:relative; width:80px; height:50px; background:#0096be; border:solid 1px #000; z-index:-1; top:17px; left:36px; transform: rotate(145deg); -webkit-transform: rotate(145deg); -moz-transform: rotate(145deg); -o-transform: rotate(145deg); box-shadow:5px -7px 10px rgba(0,0,0,0.25); -webkit-box-shadow:5px -7px 10px rgba(0,0,0,0.25); -moz-box-shadow:5px -7px 10px rgba(0,0,0,0.25); } div.hand_circle{ position:absolute; width:60px; height:60px; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; border:2px solid #000; background:#fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999)); background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); } .hand_right{ top:32px; left:40px; } .arm_rewrite_right{ position:relative; width:4px; height:45px; background:#07beea; top:-51px; left:18px; } .hand_left{ top:34px; left:10px; } .arm_rewrite_left{ position:relative; width:4px; height:50px; background:#0096be; top:-52px; left:92px; } #foot{ position:relative; width:280px; height:40px; top:-141px; left:20px; } #foot_left{ width:125px; height:30px; background:#fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999)); background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999); border:solid 2px #333; border-top-left-radius:80px; border-bottom-left-radius:40px; border-top-right-radius:60px; border-bottom-right-radius:60px; -webkit-border-top-left-radius:80px; -webkit-border-bottom-left-radius:40px; -webkit-border-top-right-radius:60px; -webkit-border-bottom-right-radius:60px; -moz-border-radius-topleft:80px; -moz-border-radius-bottomleft:40px; -moz-border-radius-topright:60px; -moz-border-radius-bottomright:60px; position:relative; left:8px; top:2px; box-shadow:-6px 0px 10px rgba(0,0,0,0.35); -webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35); -moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35); z-index:-1; } #foot_right{ position:relative; width:125px; height:30px; background:#fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999)); background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999); border:solid 2px #333; border-top-left-radius:60px; border-bottom-left-radius:60px; border-top-right-radius:80px; border-bottom-right-radius:40px; -webkit-border-top-left-radius:60px; -webkit-border-bottom-left-radius:60px; -webkit-border-top-right-radius:80px; -webkit-border-bottom-right-radius:40px; -moz-border-radius-topleft:60px; -moz-border-radius-bottomleft:60px; -moz-border-radius-topright:80px; -moz-border-radius-bottomright:40px; top:-32px; left:141px; box-shadow:-6px 0px 10px rgba(0,0,0,0.35); -webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35); -moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35); z-index:-1; } #foot_rewrite{ position:relative; width:20px; height:10px; background:#fff; background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff)); background: -moz-linear-gradient(right top, #666, #fff 83%, #fff); top:-76px; left:127px; border-top:2px solid #000; border-right:2px solid #000; border-left:2px solid #000; border-top-right-radius:40px; border-top-left-radius:40px; -webkit-border-top-right-radius:40px; -webkit-border-top-left-radius:40px; -moz-border-radius-topleft:40px; -moz-border-radius-topright:40px; } #shadow_doutai_left{ width:30px; height:200px; box-shadow:-10px 10px 15px rgba(0,0,0,0.45); -webkit-box-shadow:-10px 10px 15px rgba(0,0,0,0.45); -moz-box-shadow:-10px 10px 15px rgba(0,0,0,0.45); position:absolute; top:250px; left:46px; z-index:-10; } #shadow_doutai_right{ width:30px; height:200px; box-shadow:10px 10px 15px rgba(0,0,0,0.35); -webkit-box-shadow:10px 10px 25px rgba(0,0,0,0.35); -moz-box-shadow:10px 10px 15px rgba(0,0,0,0.35); position:absolute; top:240px; left:230px; z-index:-10; } #shadow_doutai_arm{ width:85px; height:165px; box-shadow:-100px 10px 15px rgba(0,0,0,0.0); -webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25); -moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25); position:absolute; top:230px; left:113px; z-index:10; opacity:0.5; transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform: rotate(-20deg); border-bottom-left-radius:40px; -webkit-border-bottom-left-radius:40px; -moz-border-radius-bottomleft:40px; border-top-left-radius:20px; -webkit-border-top-left-radius:20px; -moz-border-radius-topleft:20px; } #shadow_belt{ width:40px; height:30px; box-shadow:-100px 10px 15px rgba(0,0,0,0); -webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25); -moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25); position:absolute; top:240px; left:130px; z-index:10; border-bottom-left-radius:40px; -webkit-border-bottom-left-radius:40px; -moz-border-radius-bottomleft:40px; z-index:300; } #arm_left:not(\*|*), .arm_rewrite_left:not(\*|*){ background:#07beea; } #arm_left, .arm_rewrite_left{ background:#07beea\9; *background:#07beea; _background:#07beea; } #kiji{ position:relative; top:-150px; } </style> </head> <body> <div id="doraemon"> <div id="face"> <div id="head_light"></div> <div id="eyes"> <div class="eye eye_left"></div> <div class="black_eye black_left"></div> <div class="eye eye_right"></div> <div class="black_eye black_right"></div> </div> <div id="base"> <div id="base_white"></div> <div id="nose"> <div id="nose_light"></div> </div> <div id="nose_line"></div> <div id="mouth"></div> <div id="mouth_rewrite"></div> <div id="firefox_mouth"></div> <div class="whiskers whi_right_top rotate160"></div> <div class="whiskers whi_right"></div> <div class="whiskers whi_right_bottom rotate20"></div> <div class="whiskers whi_left_top rotate20"></div> <div class="whiskers whi_left"></div> <div class="whiskers whi_left_bottom rotate160"></div> </div> </div> <div id="choker"> <div id="belt"></div> <div id="bell"> <div id="bell_line"></div> <div id="bell_circle"></div> <div id="bell_under"></div> <div id="bell_light"></div> </div> </div> <div id="body"> <div id="doutai"></div> <div class="base_white2 doutai_center"></div> <div id="pocket"> <div id="circle"></div> <div id="circle_rewrite"></div> </div> </div> <div id="hand_right"> <div id="arm_right"></div> <div class="hand_circle hand_right"></div> <div class="arm_rewrite_right"></div> </div> <div id="hand_left"> <div id="arm_left"></div> <div class="hand_circle hand_left"></div> <div class="arm_rewrite_left"></div> </div> <div id="foot"> <div id="foot_left"></div> <div id="foot_right"></div> <div id="foot_rewrite"></div> </div> <div id="shadow_doutai_arm"></div> <div id="shadow_doutai_left"></div> <div id="shadow_doutai_right"></div> <div id="shadow_belt"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

让Adobe Dreamweaver CS4支持CSS3语法高亮

四月 9th, 2010

CSS3相比CSS2增加了更多的标记与效果，但Adobe Dreamweaver CS4还只支持CSS2的语法高亮。

我们可以通过Adobe Extension Manager CS4来为Dreamweaver扩展CSS3相关功能，使其能支持语法高亮。

Adobe Extension Manager CS4破解版：http://www.sz1001.net/soft/39093.htm

CSS3扩展下载地址，http://www.brsbox.com/filebox/down/fc/f6688969368bd251895b1b1bec815165

下载后，用Adobe Extension Manager加载安装就可以了。

Twitter
- 百度百科页面布局改变了。主体页面居中后，感觉右上角的用户面板很不协调。
- SQL查询真可怕。
- fg紧急更新了。。
- 听说不能翻了？
- 环境配置很烦人。
- “反三俗”？什么是俗。
- 养鸽子的想法太浪漫了，都有些浪费了，想想，用户忘记了自己的密码，在网站选择了找回密码，突然窗外飞来一只鸽子，脚上绑着用户的密码。然后那鸽子再也飞不回了。
- 如果大家都不用QQ了，那QQ就完了。所有业务都完了。怎样才能让大家不用QQ改用其它的通讯方式呢？
- 新版倚天屠龙记，渣制作，渣台词，渣造型。
- 有一篇文章里面说这个人点菜点了一份羊肉，结果出版社说这个不行，这不能过。我问为什么，他们说因为点羊肉代表这个人没有点牛肉没有点猪肉，没有点猪肉就说明他可能不吃猪肉，那就说明他可能是个回民，这就牵涉到了民族宗教问题。
- WIN 7内存管理做得很好。。
- 三峡君，加油。
- 你永远叫不醒一个装睡的人。。
- 这破JS。
- IE6支持索引色透明。图片做成索引色透明，透明效果就可以显示出来了。
- PHP输出大型文件。
- 分分分，浏览器到命根...
- 凉爽了几天。
- 火狐，内存占用之王。
- 技术就是锦上添花的东西，所以技术不能解决根本的问题。
文章归档
分类目录
- c
- CSS
- html
- php
- Python
- wordPress
- 嘀咕
- 系统
- 转载
- 随便说说
标签
asp.net background-attachment CC coolcode CSS CSS3 CSS背景 ecshop ecshop 2.7.1 ftp ftputil google Google App Engin Google App Engine Launcher iis 7 ip iPod touch linux php php 5.3 php 5.3.2 power Python runcode session ubuntu UltraEdit windows 7 wordPress 七夕主题亚克西修改密码商务中国心神不宁总结故宫林大饼子清明清明上河图生日站点地图系统网站腾讯微博
最近文章
近期评论
- 土狼妹妹在我用的火狐插件（列表）上的评论
- futures 在成功开通腾讯微博上的评论
- Ｍusicら冉兒在成功开通腾讯微博上的评论
- haycarol 在成功开通腾讯微博上的评论
- outman 在分享3颗蒲公英种子上的评论
网友链接
链接表

王涛的小站

Posts Tagged ‘CSS3’

哆啦A梦告诉你目前各家浏览器对 CSS3 的支持状况

让Adobe Dreamweaver CS4支持CSS3语法高亮

Twitter

文章归档

分类目录

标签

最近文章

近期评论

网友链接

链接表