css3 border-radius详解

border-radius用于使元素边框产生圆角：

border-radius:length{1,4}[/length{1,4}]

eg:

border-radius:15px 30px /20px;

"/"前表示水平半径，后表示垂直半径。

如果没有“/”，则垂直半径和水平半径一致。

eg1:

border-radius:15px;

四个角的水平和垂直半径都为15px;

eg2:border-radius:15px 30px;

top-left bottom-right的水平和垂直半径为15px;

top-right bottom-left的水平和垂直半径为30px;

eg3:border-radius:15px 20px 30px;(三个参数的情况是top-left为参数1，top-right、bottom-left为参数2，bottom-right为参数3)

如果是三个参数，那么

top-left:为15px;

top-right/bottom-left为20px;

bottom-right为30px;

水平半径和垂直半径相同。

eg4：border-radius:15px 20px/20px 30px

top-left:15px 20px

top-right:20px 30px

bottom-right:15px 20px

bottom-left:20px 30px

eg5:border-radius:15px 20px/20px 30px 15px

top-left:15px 20px;

top-right:20px 30px;

bottom-right:15px 15px;

bottom-left:20px 30px

总之：如果有“/”来分水平和垂直半径，那么斜杠前后的水平参数和垂直参数都按TRBL的顺序来排列。

another:

border-radius还有内半径和外半径的区别；

当元素的border-width一定时，border-radius小于或等于border-width时，边框内部不具有圆角效果。

为何当border-radius的半径小于元素边框的厚度时，内部没有圆角效果？我在这里说一下，因为我们的border-radius的内径值是等于外径值减去边框厚度值，当他们的值为负时，内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时，我们内外曲线的圆心才会在同一位置。

table元素只有在border-collapse为separate时，border-radius才有效果。

img元素运用border-radius时，只有在firefox4.0以上的浏览器中才有效果，在其他浏览器中无效果。

要使元素（包括边框）为圆形，那么border-radius为（padding+border-width+width/2);

如果border-radius大于(padding+border-width+width/2),那么border-radius的实际大小仍为(padding+border-width+width/2).

css3 border-radius详解相关推荐

CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
php开源混合模式吗,CSS3混合模式使用详解
这次给大家带来CSS3混合模式使用详解,使用CSS3混合模式的注意事项有哪些,下面就是实战案例,一起来看一下. 一.关于混合模式熟悉PS的人都应该知道混合模式: SVG以及Canvas中也有混合模式 ...
CSS3动画特效详解
大家都知道网页的3大组成部分,分别是结构,表现和行为.就像我们要盖一座房子,要地基要打的扎实,房子的架构要稳固,而我们网页当中的地基和架构就是Html,当我们盖好了房子,最终的美观度还是看我们的装修风 ...
视频教程-HTML5+CSS3项目实战详解-HTML5/CSS
HTML5+CSS3项目实战详解 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate ...
html旋转角度计算,CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate） | 0101后花园...
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园 2018-09-26 在CSS3中,可以利用transfor ...
CSS3新特性详解(二)：CSS3 字体@font-face详解、如何创建和修改woff字体文件及text-shadow等文本效果
关于CSS3新特性,在上篇博文中"CSS3新特性详解(一):CSS3选择器.边框.背景使用细节及案例演示",讨论了CSS3选择器.边框和背景,本文讨论字体@font-face使 ...
CSS3各个模块详解
一, CSS3 盒子阴影属性 box- shadow 也是 CSS3 新增的一个重要属性, 用来定义元素的盒子阴影. inset: 阴影类型, 可选值. 如果不设置, 其 ...
html5 css3基础知识详解
如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了 CSS2的众多不足之处,使得Web开发变得更为高效和便捷. Html4 ...
如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
HTML+CSS教程（十）css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...

css3 border-radius详解

css3 border-radius详解相关推荐

最新文章

热门文章