css3圆角border
日期：2013-05-03 浏览次数：21007 次
属性：
border-top-right-radius；border-bottom-right-radius；border-bottom-right-radius；border-bottom-right-radius
值：<length> <length>?。它们分别是定义角外形的四分之一椭圆的两个半径
- 第一个值是水平半径。
- 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
- 如果任意一个值为0，则这个角是矩形，不会是圆的。
- 值不允许是负值。
- 属性：border-radius。它是上面四个属性值的简写。
值：<length>{1,4} [ / <length>{1,4} ]?- 如果斜线前后的值都存在，那么斜线前的值设置水平半径，且斜线后的值设置垂直半径。如果没有斜线，则水平半径和垂直半径相等。
- 四个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置的。如果bottom-left省略，那么它等于top-right。如果bottom-right省略，那么它等于top-left。如果top-right省略，那么它等于top-left。
- 使用范围：所有的元素，除了table的款式属性border-collapse是collapse时
- 内边半径等于外边半径减去对应边的厚度。当这个结果是负值时，内边半径是0。所以内外边曲线的圆心并不一定是分歧的。
- border-radius也会导致该元素的背景也是圆的，即便border是none。如果background-clip是padding-box，则背景（background）会被曲线的内边裁剪。如果是border-box则被外边裁剪。border和padding定义的区域也一样会被曲线裁剪。
- 所有的边框款式（solid、dotted、inset等）都遵照角的曲线。如果设置了border-image，则曲线以外的部分会被裁剪掉。
- 如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。
- 两条相邻边颜色和款式转变的中心点是在一个和两边宽度成反比的角上。比如，两条边宽度相反，这个点就是一个45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线
- 角不允许互相堆叠，所以当相邻两个角半径的和大于所在矩形区域的大小时，用户代理（浏览器）比如缩小一个或多个角半径。运算法则如下：f = min(Li/Si)，i ∈ {top, right, bottom, left}，Ltop = Lbottom = 所在矩形区域的宽，Lleft = Lright = 所在矩形区域的高。如果f < 1，那么所有角半径都乘以f
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
