12 / 2 页下一页

查看: 3219|回复: 19

CSS 3 支持的圆角框简单教学

[复制链接]

fyhao

20 主题	4 好友	2395 积分

白金长老

Rank: 10

发消息

电梯直达

1^#

发表于 2010-4-25 07:54 PM |只看该作者 |倒序浏览

先看演示图：

我们的目标就是做这个 button 哦，想想看，你会怎么做？先用 Photoshop 做好框？还是用做成四个角的图片，然后用复杂的多层级 div 来实现？
如果真的使用后者的方法，会用多少的div，多少的css呢？

CSS 3 为我们带来了好消息，我们可以不用那么麻烦的设计圆角框了。

先看看一个 button HTML 代码，（注：理论上支持任何一个HTML元素）

<input type="button" class="button" />

复制代码

看到吗？我在后面加了一个 class="button"
因为我会在 CSS 为它 define 一个 button 的 css class

CSS代码如下：

.button {
border:#666 solid 1px;
background:#E9E9E9;
-moz-border-radius:5px;
-webkit-border-radius:5px;
font-weight:bold;
}

复制代码

看到吗？第一行，我做了 border 框代码（最原始的，我们先自己define一个Border框样式。
接下来，第二行，我定义了背景颜色。
第三行和第四行就是核心了，CSS 3 支持的新代码，设计圆角的半径。

err...
你或许会问：为什么要两行呢？ -moz-border-radius 和 -webkit-border-radius 有点相似的呢？
我要告诉你的是，由于目前 CSS 3 只被部分现代浏览器 (modern browser) 所支持，如 (Google Chrome, Mozilla Firefox 3.6, Apple Safari，注 Microsoft Internet Explorer 只有在最新版 Version 9 的时候才支持)。
-moz 开头的是 mozilla 支持的，-webkit 开头的是 apple 支持的。

相信你能从这里领悟到更多东西，激发你的创意，创造出更美好的东西，清心期待你的作品！
如果能帮到你的话，请回复一下，一起讨论吧！

css , 教学 , 圆角

收藏0

相关帖子

使用道具举报

宅男-兜着走

46 主题	6 好友	6456 积分

百变名嘴

Rank: 13

发消息

2^#

发表于 2010-4-25 08:39 PM |只看该作者

用过了，结果IE下还是很尖的四方形。。。。所以还是放弃了。
后来搜寻到了， round corner jq plugin。还不错，效果过得去，不过还是问题多多。

结论：要限制顾客用指定的Browser来看效果，好过做个兼容性高的网页。

使用道具举报

小恶魔J@YL()NG

23 主题	5 好友	4778 积分

一流名嘴

Rank: 12

发消息

3^#

发表于 2010-4-26 06:51 AM |只看该作者

这ie问题我遇过，我做 www.terrylimteklee.com 也是发现ie用不到

使用道具举报

fyhao

20 主题	4 好友	2395 积分

白金长老

Rank: 10

发消息

4^#

发表于 2010-5-5 04:16 PM |只看该作者

很久以前我都是 IE 的忠实支持者，很多朋友告诉我，用Firefox啦，超好的，很多好用的插件，但我还是喜欢IE。
但，我现在终于换到史上最强的浏览器，Google Chrome 了，真的是很棒。速度又快，而且可以 less click but do many things，界面也简单不复杂，不像其他浏览器默认下来一堆东西。