|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
秦歌(YanKaven)的站点:http://dancewithnet.com/
两年前宣布的《ThevisualdesignofWeb2.0》中提到“Roundedeverything”,圆角因令人感到温馨的友爱作风而变得无处不在。这个无处不在也让良多前端工程师累个半逝世,YAHOOPerformanceResearchEngneerTeam的Nicole在报告《DesigningFastWebsites》顶用的副题目是don’tblametheroundedcorners!,从正面也申明了圆角给完成者带来的困扰:完成贫苦、兼容坚苦、功能欠安。而W3C早在2002年的CSS3草案中就到场了一个叫border-radius的属性,经由过程它能够间接来界说HTML元素的圆角。
CSS3的border-radius标准
最新草案中其次要信息以下:
- 属性:
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
|
|