网页设计中的轮廓

轮廓

CSS2还引入了用户界面样式中的最后一个主要方面:轮麻。轮廓有点类似于边框,不过二者有两个重要的区别。首先,轮廓不像边框那样参与到文档流中,因此轮廓出现或消失时不会影响文档流,即不会导致文档的重新显示,如果为一个元素指定了50像素的轮麻,这个轮廓很可能会覆盖其他元素。其次,轮麻可能不是矩形,不过不要高兴得太早,这并不是说可以创建圆形轮廓。相反,这意味着行内元素的轮廓可能不同于该元素的边框。利用轮廓,用户代理可以“合并”部分轮廊,创建一个连续伹非矩形的形状。图13-10显示了这样一个例子。

用户代理不一定需要支持非矩形轮廓。它们可能会像处理边框一样设置行内非替换元素的轮廓格式,不过,兼容用户代理必须确保轮廊不能占据布局空间。

轮廓和边框之间还有一个根本的差异:它们不是同一个东西,所以在网页设计时可以在同一个元素上共存。

CSS2规范指出:“轮廓可以画在边框边界的外面。”注意这句话里的推辞。只是建议用户代理按这句话去做,不过这并不是必须恪守的要求。有些用户代理可能决定把轮廓画在内边框边界内,或者离边框有一点距离的地方。在本文中,所有支持轮廓的浏览器都会把轮廊画在外边框边界外面,所以谢天谢地这是一致的。

一般认为轮廊是用户界面样式的一部分,这是因为它们最在网站建设中常用于指示当前焦点。如果一个用户使用键盘导航从一个链接跳到另一个链接,那么当前有焦点的链接往往会有一个轮廓。在Windows平台的Internet Explorer中,轮廊应用于用户已选择的任何链接(如果用户使用鼠标,则是用鼠标“点击”的链接)。而且会一直留在那里,尽管有时并不希望如此。其他浏览器会向有键盘输入焦点的文本输入应用轮廓,指示用户键入时会从哪里开始输入。

可以看到,轮廓的样式与边框很类似,不过除了前面所提到的,二者之间还有一些重要的差别。下面只是简略地介绍它们的相似性,更多的时间将用来讨论二者的不同。

设置轮廓样式

类似于边框,轮廊最基本的方面就是样式,这要利用outline-style设置。

outline-style

值:none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

初始值:none

应用于:所有元素

继承性:无

计算值:根据指定确定

这组样式关键字与边框样式关键字基本上相同,其视觉效果也是一样的。只是少了一个关键字:hidden不是一个合法的轮廓样式,用户代理实际上要把它处理为nbne。这是有道理的,因为即使轮廓可见也不会影响布局。

轮廓与边框之间的另一个区别是,只能为一个outline-style值指定一个关键字(而边框可以指定最多4个关键宇)。其实际效果是,一个元素周围必然有相同的轮廓样式,而不论轮廓是否是矩形。这可能也是对的,因为对于非矩形轮廓,要想确定如何应用不同的样式可能很困难。

轮廓宽度

一旦建立了轮廊并为之指定样式,接下来可以用outline-width定义轮廓的宽度(这一点不难猜到),这是一个不错的想法。

outline-width

值:thin | medium | thick |<length>| inherit

初始值:medium

应用于:所有元素

继承性:无

计算值:绝对长度丨如果轮廊的样式是none或hidden,则为0

如果你在网页设计时设置过边框的宽度,对这个关键字列表应该不陌生。outline-width与border-width之间唯一真正的区别是整个轮廓只能声明一个宽度(类似于轮廓样式)。因此,一个值中只允许有一个关键字。

网站建设、网络营销咨询专线:0871-63535511(点击可一键拨号)