鱼C论坛

 找回密码
 立即注册
查看: 5336|回复: 8

CSS3 HTML5实例一(圆角实现)

[复制链接]
发表于 2012-6-26 03:00:37 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
CSS 3  HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧,可以帮你实现未来的Web。目前这些技术不应该用在正式的客户项目,它们更适合你的个人博客站点,Web 设计社区,或者不会有客户向你投诉的场合。

圆角效果

1.jpg

CSS3 新功能中最常用的一项是圆角效果,标准 HTML 方块对象是90度方角的,CSS3 可以帮你实现圆角。
-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;


甚至单个角也可以实现圆角,不过 Mozilla 和 Webkit 的语法稍有不同。
-moz-border-radius-topleft: 20px;-moz-border-radius-topright: 20px;-moz-border-radius-bottomleft: 10px;-moz-border-radius-bottomright: 10px;-webkit-border-top-rightright-radius: 20px;-webkit-border-top-left-radius: 20px;-webkit-border-bottom-left-radius: 10px;-webkit-border-bottom-rightright-radius: 10px;


所支持的浏览器:Firefox, Safari , Chrome

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2012-6-29 10:30:10 | 显示全部楼层
学习,不错{:1_1:}
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2012-6-29 11:19:16 | 显示全部楼层
看不懂·····:(
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2013-4-20 14:48:30 | 显示全部楼层
真是好贴啊……
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
发表于 2013-8-19 09:18:33 | 显示全部楼层
你这个太长了,看不懂
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2013-9-12 16:26:19 | 显示全部楼层
.................
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2013-9-12 17:46:15 | 显示全部楼层
CSS3 HTML5实例一(圆角实现)
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2014-1-6 14:37:38 | 显示全部楼层
感恩无私的分享与奉献 :)
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2014-2-26 17:12:12 | 显示全部楼层
感谢lz 学习了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-21 22:03

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表