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

fyhao

先看演示图：

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

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

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

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

复制代码

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

CSS代码如下：

1. 
   
2. .button {
   
3.         border:#666 solid 1px;
   
4.         background:#E9E9E9;
   
5.         -moz-border-radius:5px;
   
6.         -webkit-border-radius:5px;
   
7.         font-weight:bold;
   
8. }
   

复制代码

看到吗？第一行，我做了 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 支持的。

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

itaro

我想在jbtalks里卖买的帖里做一个12个格子~
因为要放我的产品~
想请教你们可以教我吗?我看到有人能放~可是我自己试了~不可以~不知道什么原因~

我喜欢

== 。。。 frontp 好用咩？

现在我在学着用 Expression Web， DW我觉得不是很 。。。
宅男-兜着走 发表于 2010-10-29 01:32 PM

    没办法呀，老师规定的。。
不然我听说dreamweaver 或kompozer都不错。。
上一次的assignment要用notepad做的
打code打倒我半死~

小恶魔J@YL()NG

回复 17# 宅男-兜着走

我自己学着做webbase的东西咯，MVC是师父他们教我~

宅男-兜着走

回复 16# 小恶魔J@YL()NG


== 。。。。 VS 是真的不错。

问你哦， 你那里是学 Webform， 还是 MVC？

小恶魔J@YL()NG

回复 15# 宅男-兜着走

用vs啦，干好用啦~code又排得美美的~

宅男-兜着走

回复  我喜欢

用notepad也能做到~frontpage 和 大多的 网页篇主器是大同小异的而已~gjl520@hotmail.com ...
小恶魔J@YL()NG 发表于 2010-10-29 11:30 AM

== 。。。 frontp 好用咩？

现在我在学着用 Expression Web， DW我觉得不是很 。。。

小恶魔J@YL()NG

回复 13# 我喜欢

用notepad也能做到~frontpage 和 大多的 网页篇主器是大同小异的而已~gjl520@hotmail.com，我常用的咯

我喜欢

回复  我喜欢


要我怎么跟你说呢？还是你要整的source code？ 其实很容易拿得啦~你要的话加我msn，我 ...
小恶魔J@YL()NG 发表于 2010-10-27 08:12 PM

    其实这次assignment是要用microsoft frontpage做的，有办法放进去吗？
不好意思，我对这些一窍不通。。麻烦你了~
方便给我email让我加你msn吗？

小恶魔J@YL()NG

回复 11# 宅男-兜着走

我很少阿~哈哈~

还有很多东西不懂的~我师父就厉害了