使用CSS3添加圆角和阴影

css3-border-radius-box-shadow

CSS3是W3C发布的CSS的最新版本,支持大量强大的功能,但是由于各大浏览器对标准的支持程度不同,很难保证制作的东西在所有的浏览器中都保持一致。现在连向来对标准支持很差的IE都发布了遵循W3C标准的IE9,CSS3的特性在各大浏览器上基本都得到了实现。现在我教你使用CSS3添加圆角和阴影,另外还有CSS2中的文字阴影。

CSS离不开HTML,所以先要用HTML把内容写好,然后才能用CSS样式话。HTML很简单,为了演示圆角和阴影,我只使用了一个div,一个h1和一个h2。完成的HTML如下:

SoleilNeon

Design Better

HTML很简单,只有短短3行,如果没有应用CSS,你会发现在浏览器中这相当的丑,当我们应用了CSS样式化HTML之后,效果就不一样了,CSS就是这样化腐朽为神奇的。现在为h1和h2文字设置样式,为div设置背景色和边框。

*{
	margin:0;
	padding:0;
}

body{
	background-color:#333333;
	font:62.5% Arial, Helvetica, sans-serif;
}

h1{
	color:#333333;
	font-size:5em;
	margin-top:50px;
	text-align:center;
}

h2{
	color:#333333;
	font-size:3em;
	text-align:center;
}

#box{
	background-color:#cccccc;
	border:1px solid #ffffff;
	left:50%;
	top:50%;
	margin-left:-251px;
	margin-top:-101px;
	width:500px;
	height:200px;
	position:absolute;
}

现在,有了这个基础的外观,没有圆角,没有阴影,没有文字阴影,最为简单的效果。

css3-normal

现在,我们要给div添加上圆角和阴影,代码如下:

#box{
	background-color:#cccccc;
	border:1px solid #ffffff;
	border-radius:10px;
	box-shadow:0 0 15px 2px #000000;
	left:50%;
	top:50%;
	margin-left:-251px;
	margin-top:-101px;
	width:500px;
	height:200px;
	position:absolute;
}

CSS3中的border-radius属性是用于添加圆角的,属性值为圆角的半径。这里设置的为10像素。

box-shadow属性用于添加阴影。box-shadow共有5个参数,一次为x轴位移,y轴位移,模糊半径,扩展,颜色值。如果你熟悉Photoshop的话,那么这些属性很好理解。

现在,如果你使用的是IE 9,或者Opera 10以上版本的话就能看到圆角和阴影了,就像这样:

css3-radius-shadow

但是,如果你使用的是Firefox的话,现在还看不到圆角和阴影,就和第一张图的效果一样,因为Firefox目前还不支持公共的border-radius和box-shadow,只支持Firefox私有的CSS3属性。如果你使用的是Chrome或者Safari浏览器的话现在只能看到圆角,还看不到阴影,因为Chrome和Safari同样只支持Webkit引擎的私有CSS3属性。现在的工作就是给这3个浏览器添加圆角和阴影。添加如下的代码:

#box{
	background-color:#cccccc;
	border:1px solid #ffffff;
	border-radius:10px;
	box-shadow:0 0 15px 2px #000000;
	-moz-border-radius:10px;
	-moz-box-shadow:0 0 15px 2px #000000;
	-webkit-box-shadow:0 0 15px 2px #000000;
	left:50%;
	top:50%;
	margin-left:-251px;
	margin-top:-101px;
	width:500px;
	height:200px;
	position:absolute;
}

现在,所有的浏览器都能正确的显示圆角了。-moz-border-radius和-moz-box-shadow是Firefox的私有CSS3属性,参数方式和公共的border-radius及box-shadow是一样的,其它的浏览器无法识别这两个属性,所以会跳过,并不会有什么影响。-webkit-box-shadow是Chrome和Safari的Webkit引擎的私有属性,参数方式也和公共的box-shadow一样。圆角和阴影都完成了,现在该给文字添加阴影了。添加如下的代码:

h1{
	color:#333333;
	font-size:5em;
	margin-top:50px;
	text-align:center;
	text-shadow:1px 1px 1px #ffffff;
}

h2{
	color:#333333;
	font-size:3em;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
}

text-shadow属性用于给文字添加阴影,但是如果你有技巧的话可以做成像我这样的向内凹陷的浮雕效果。text-shadow的参数依次为,x轴位移,y轴位移,模糊半径,颜色值。看起来是阴影还是浮雕最重要的就是颜色的把握上。

现在除了IE9之外的浏览器都能显示文字阴影效果了,IE9不支持text-shadow属性。完成之后的效果就像这样:

css3-radius-shadow-text-shadow

这个效果在IE9,Firefox 3.6.10,Chrome 7.0.544.0,Opera 10.70,Safari 5.0.1上测试通过。其实只要浏览器版本不要太旧,不要是非IE9版的IE浏览器就能显示出来。你可以用IE8打开这个页面看看效果,没有圆角,没有阴影,没有文字阴影。

这个效果可以在Smigoo的主页看到,由SoleilNeon荣誉制作,哈哈。

8 Comments

      • 估计方便它们调试什么的。
        这两个属性还未完全支持呢。
        对了,Chrome已经支持标准border-radius了,阴影还没。

        但是因为私用hack的关系,一行简单的代码变成一坨坨。。怒
        而且这也过不了验证,唉

        Reply

Leave a Comment.