网页设计中的轮廓

轮廓

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 || inherit

初始值：medium

应用于：所有元素

继承性：无

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

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

标题名称：网页设计中的轮廓
网站URL：https://www.cdcxhl.com/news6/160456.html

成都网站建设公司_创新互联，为您提供网页设计公司、定制网站、软件开发、网站导航、App开发、用户体验

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联