当前位置:优欧网络有限公司 > 做网站 > CSS3的border

CSS3的border

来源:http://www.yoit.net/ 作者:优欧网络科技有限公司 发布时间:2015-11-21 08:53 点击:90

圆角因使人感觉舒适地友好格调而变得无处不在。这个无处不在也让很多前端工程师带来困扰:实现麻烦、兼容困难、性能不佳。而W3C早在 2002年地CSS3草案 中就加入了一个叫 border-r广告ius 地属性,通过它可以直接来定义HTML标签地圆角创建。

CSS3地border-r广告ius规范

最新草案 中其主要信息如下:

属性:

border-top-right-r广告ius

border-bottom-right-r广告ius

border-bottom-right-r广告ius

border-bottom-right-r广告ius

值: ?。他们分别是定义角形状地四分之一椭圆地两个半径。

第一个值是水平半径。

假如第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。

假如任意一个值为0,则这个角是矩形,不会是圆地。

值不同意是负值。

属性:border-r广告ius。它是上面四个属性值地简写。

值:{1,4} [ / {1,4} ]?

假如斜线前后地值都存在,那么斜线前地值设置水平半径,且斜线后地值设置垂直半径。假如不存在斜线,则水平半径和垂直半径相等。

四个值是按照top-left、top-right、 bottom-right、 bottom-left地顺序来设置地。假如bottom-left省略,那么它等于top-right。假如bottom-right省略,那么它等于top-left。假如top-right省略,那么它等于top-left。

应用范围:全部地标签,除了表格地样式属性border-collapse是collapse时

内边半径等于外边半径减去对应边地厚度。当这个结果是负值时,内边半径是0。所以内外边曲线地圆心并不一定是一致地。

border-r广告ius也会导致该标签地背景也是圆地,即使border是none。假如 background-clip 是p广告ding-box,则背景(background)会被曲线地内边裁剪。假如是border-box则被外边裁剪。border和p广告ding定义地区域也一样会被曲线裁剪。

全部地边框样式(solid、dotted、inset等)都遵照角地曲线。假如设置了border-image,则曲线以外地部分会被裁剪掉。

假如角地两个相邻边有不同地宽度,那么这个角将会从宽地边平滑过度到窄地边。当中一条边甚至可以是0。

两条相邻边颜色和样式转变地中心点是在一个和两边宽度成正比地角上。例如,两条边宽度相同,这个点就是一个45°地角上,假如一条边是另外一条边地两倍,那么这个点就在一个30°地角上。界定这个转变地线就是连接在内外曲线上地两个点地直线

角不同意相互重叠,所以当相邻两个角半径地和大于所在矩形区域地大小时,用户代理(浏览器)例如缩小一个或多个角半径。运算法则如下:f=min(Li/Si),i ∈ {top, right, bottom, left},Ltop=Lbottom=所在矩形区域地宽,Lleft=Lright=所在矩形区域地高。假如f < 1,那么全部角半径都乘以f。

浏览器赞成

实际中,目前不存在任何一款浏览器赞成这个属性,只有部分浏览器利用其私有属性赞成部分实现:

Firefox对border-r广告ius地赞成 :

-moz-border-r广告ius: {1,4} | inherit

-moz-border-r广告ius-bottomleft : | inherit

-moz-border-r广告ius-bottomright 温州网络公司 : | inherit

-moz-border-r广告ius-topleft : | inherit

-moz-border-r广告ius-topright : | inherit

只对每个角设置一个半径,只赞成实现四分之一圆角,并不赞成椭圆形圆角。

具体每个角地命名规则也和W3C不一致,这个比较讨厌。

Firefox3圆角已经相当圆滑了,Firefox2比较糟糕,好在它即将终结了。

Safari和Chrome对border-r广告ius地赞成 :

-webkit-border-r广告ius: {1,2} | inherit

-webkit-border-bottom-left-r广告ius : {1,2} | inherit

-webkit-border-bottom-right-r广告ius : {1,2} | inherit

-webkit-border-top-left-r广告ius : {1,2} | inherit

-webkit-border-top-right-r广告ius : {1,2} | inherit

每个属性有1个或2个值,当有两个值时1个表现水平半径,一个表现垂直半径writing-mode改变也随之而变)。所以,Safari和Chrome中地圆角可以是椭圆角。

webkit地实现方式和 W3C地CSS3草案2005年版本 非常一致,和当前地草案最大不同就是简写属性-webkit-border-r广告ius地属性值也只有1个或2个值,意思和前面相同。

Chrome中圆角锯齿比较严重,基本上和Firefox2是同一水平,或许是它地webkit版本较低造成地。

由于webkit出生于kHTML,所以把 上面属性中地webkit换成khtml即会得到以khtml为重点地浏览器赞成地属性了。

当相邻地角半径之和大于所在矩形区域地大小时,都会直接设置全部地角半径为0,即圆角失效,而不会像Firefox那样同比率缩小。温州网络公司

Opera尚不赞成border-r广告ius,虽然 Opera10 alpha拥有众多地CSS3改进 ,而是依旧看不到对其赞成地希望。

IE就不用说了,标准地不赞成了。从MSDN地 CSS Compatibility and Internet Explorer 中可以看出IE8已经铁定不赞成了。

实际应用

最简单地应用就是赞成地用圆角,不赞成地用方角。例如wordpress2.7地后台、 雅虎口碑UED 地blog和 今天You带伞了吗? 。基础源码如下:

border-width: 1px;

border-style: solid;

-moz-border-r广告ius: 11px;

-kHTML-border-r广告ius: 11px;

-webkit-border-r广告ius: 11px;

border-r广告ius: 11px;

利用VML可以实现从IE5-7地圆角 ,而是貌似IE8不赞成VML了。 组件DD_roundies 就是综合之前解决方案地一个具体应用。说实话这种实现出来地圆角也比较粗糙了,我感觉还不如不要。

像VML一样,Canvas也能实现圆角,切除了IE外,全部地主流浏览器都赞成。所以就有了两者结合实现地组件 Cornerz 。

假如上面地现实太痛苦,而又非要用圆角地话,要么一个像素一个像素去拼装,例如Chunky Borders;要么就老老实实用图像来实现吧,例如 CSS Mojo 地方法。

Copyright © 2002-2018优欧网络科技有限公司版权所有 Power by YOIT