X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
在CSS3圆角布局对象
翻译谷歌翻译

如果你还没有做多,还读什么新的CSS3的,它是相当真棒。有各种新推出的可能性,包括梯度,多列,边界图像,一个我们将讨论在这里一看,边界半径。边界半径允许我们设置圆角,否则,在我们的网页布局的矩形物体。

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

第1步 - 应用CSS3边界半径

首先,让我们的应用边界半径。在样式表中,找到的规则,你想申请圆角效果。通常,这将是一个ID选择符的控制一个div元素。确保太多,你也应用背景颜色或边框(或两者),因此,你可以看到的角落!

接下来,添加“ 边界半径 ”你的规则的属性值。您使用该值越高,更加圆润的角落。

在这里,我申请的边界半径我#内容ID选择器,这是控制DIV保存我的网页内容,你可以看到包括屏幕截图。确保保存您的工作,并检查了您在浏览器中的工作。

如果你仍然得到90度角,然后您的浏览器不支持此功能。但是,不收拾东西,只是还没有。让我们来看看很酷的技巧,我前面提到的。

第2步 - 确保圆角效果工程

如前所述,只有流行的浏览器的最新版本支持对CSS3的边界半径属性。所以你怎么能保证你的布局,将努力为用户仍在使用的浏览器版本或落后两?您可以使用一些额外的代码,如下所示。

首先,让我们添加“- MOZ边界半径:”半径值。这目标是什么的简称为Gecko浏览器 - 最显着的火狐。

接下来,让我们添加“WebKit的边界半径:”我们上面使用的值相同。这将触及所有基于WebKit的浏览器一样,Chrome和Safari。添加完毕后,保存你的工作,并刷新浏览器。

第3步 - 例外情况证明规则

现在,每一个网页设计师的喜爱的浏览器(SIC)有关Internet Explorer,你问?那么,所有上述选项将不起作用。事实上,我们已经加入到这一点的代码只会被忽略资源管理器,和角落只需将呈现90度的造型,这是比它突破更好,在其默认的权利吗?!有可能拉断在IE浏览器的圆角,但知道这是一个额外的工作位,也许这件事情,我们可以得到在未来的提示。不过,暂时享受所有其他浏览器的圆角!

CSS是美妙的。探索设计浮动CSS布局


Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link