CSS3简单实现圆角


记得在前面讨论过div+css实现圆角,那个方法在以前还是蛮受用的,不过随着CSS3的普及,我们将抛弃那个因CSS3出现而显得笨重的方法了。CSS3中直接添加了圆角属性border-radius,这个属性对于前端开发者来讲,简直振奋人心。下面我们来看看,这个属性是如何定义圆角的。
首先说一下border-radius的属性值,如border-radius:10px;即以像素为单位的数值,它表示的是圆角半径为10像素。很简单哦,只可惜IE浏览器仍然不友好啊,只有IE9以上版本才表示支持。
再者,针对不同内核的浏览器,写法也有所不同,例如:
IE9+:border-radius:10px;
Opera:-o-border-radius:10px;
FireFox:-moz-border-radius:10px;
Chrome & Safari:-webkit-border-radius:10px;
看起来有些麻烦又难记哦,不过没有关系,大家需要了解就好了,因为这几个主流浏览器的较新版本都是支持border-radius:10px;这个写法的。
border-radius:10px;还可以分解为:
border-top-left-radius:10px; /*定义左上角*/
border-top-right-radius:10px; /*定义右上角*/
border-bottom-right-radius:10px; /*定义右下角*/
border-bottom-left-radius:10px; /*定义左下角*/
仔细看看,这个很容易理解,就想我们用的边框属性border,可以分解为:border-top,border-right,border-bottom, border-left一样。
如此分解就说明我们可以随心所欲的定义一个盒模型某一个或某几个角为圆角,很方便实用。
好了,下面让我们来动动手实践下效果吧:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS3随心所欲定义圆角——CCJK提供专业的网站开发、翻译本地化、网络推广一站式解决方案</title>
<style type="text/css">
* {margin:0; padding:0;}
body {padding:10px; color:#666; font-family:"微软雅黑";}
h1, h2, h3, h4 {margin-bottom:20px; padding:10px; height:30px; line-height:30px; color:#fff; background:#ccc; font-size:16px;}
h1 {border-radius:10px;}
h2 {border-radius:10px; border:2px solid #333;}
h3 {border-top-left-radius:10px; border-top-right-radius:10px; border:2px solid #333;}
h4 {border-top-left-radius:10px; border-top-right-radius:10px; border:2px dashed #333;}
</style>
</head>
<body>
<h1>此标题四角均定义为圆角,无边框《CSS3随心所欲定义圆角》——CCJK提供专业的网站开发、翻译本地化、网络推广一站式解决方案</h1>
<h2>此标题四角均定义为圆角,设置四边实线边框《CSS3随心所欲定义圆角》——CCJK提供专业的网站开发、翻译本地化、网络推广一站式解决方案</h2>
<h3>此标题定义上面两个角为圆角,设置四边实线线边框《CSS3随心所欲定义圆角》——CCJK提供专业的网站开发、翻译本地化、网络推广一站式解决方案</h3>
<h4>此标题定义上面两个角为圆角,设置四边虚线线边框《CSS3随心所欲定义圆角》——CCJK提供专业的网站开发、翻译本地化、网络推广一站式解决方案</h4>
</body>
</html>

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP