css3 border-radius详解

喜欢ヅ旅行 2022-10-01 00:52 103阅读 0赞

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).

发表评论取消回复

表情：

评论列表（有 0 条评论，103人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3 border-radius详解

border-radius用于使元素边框产生圆角： border-radius:length\{1,4\}\[/length\{1,4\}\] eg:

喜欢ヅ旅行/ 2022年10月01日 00:52/ 0 赞/ 104 阅读

相关 CSS3详解：background

CSS3对于background做了一些修改，最明显的一个就是采用设置多背景，不但添加了4个新属性，并且还对目前的属性进行了调整增强。 1、多个背景图片在css3里面，你

浅浅的花香味﹌/ 2022年08月24日 05:22/ 0 赞/ 158 阅读

相关 CSS3圆角详解

作者： [阮一峰][Link 1] 日期： [2010年12月 9日][2010_12_ 9] CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支

分手后的思念是犯贱/ 2022年08月21日 13:49/ 0 赞/ 218 阅读

相关 CSS3详解：transform

转自[点击打开链接][Link 1] \------------------------- 近来，HTML5和CSS3的发展速度还是很可观的，国内外不乏一些大站，酷站

快来打我*/ 2022年08月21日 03:19/ 0 赞/ 184 阅读

相关 CSS3:clip-path详解

我的一个学生，[Heather Banks][],想要实现他在[Squarespace][]看到的一个效果： ![nav][] 根据她的以往经验，这个网站的`HTML`

红太狼/ 2022年08月02日 02:25/ 0 赞/ 139 阅读

相关 css3 calc()方法详解

平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，

比眉伴天荒/ 2022年05月28日 23:29/ 0 赞/ 230 阅读

相关 CSS3 选择器详解

一、CSS样式的基本规则（1）链接外部样式文件：这种方式将样式文件彻底与HTML，样式文件需要额外的引入。在这种方式下，一批样式可以控制多分文档。 <link

阳光穿透心脏的1/2处/ 2022年05月20日 00:42/ 0 赞/ 165 阅读

相关 CSS3 Gradient详解

[CSS3][]发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此

曾经终败给现在/ 2022年05月10日 09:24/ 0 赞/ 199 阅读

相关详解CSS3渐变

渐变，指形状或颜色的有规律性的变化，往往可以给人很强的节奏感和审美情趣，这里研究的主要是颜色的渐变。渐变的形式在日常生活中很常见，在网页中的用的也很多，传统网页技术中往往用图片

痛定思痛。/ 2022年02月24日 08:22/ 0 赞/ 518 阅读

相关 css3 flex布局详解

原文链接： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm\_source=tuicool

谁借莪１个温暖的怀抱￠/ 2021年12月23日 11:47/ 0 赞/ 375 阅读