如何在网页设计中设置轮廓颜色

设置轮廓颜色

既然在网页设计时可以设置样式和宽度，可以想见，有一个outline-color属性来指定轮廓的颜色。

outline-color

值：| invert | inherit

初始值：invert（或用户代理特定的值，见正文说明）

应用于：所有元素

继承性：无

计算值：根据指定确定

边框与轮廓之间最有意思的差别就出现在这里：在网站建设时，轮廊颜色有关键字invert，而且这是默认值。反色轮廓意味着要对轮廓所在的像素完成反色转换。

invert导致对轮廓“后面”的像素完成反色转换，这个过程可以确保不论轮廓后面是什么都将可见。如果一个用户代理出于某种原因无法支持反色转换，则会使用元素的color计算值。

能够对屏幕上的像素反色，这很有意思，特别是对轮廓的宽度没有理论上的限制。所以，如果你愿意，完全可以使用轮廓对文档中的很大一部分完成反色。

当然，如果在设计网页时想为轮廓定义一种特定的颜色，只需使用任何合法的颜色值。以下声明的结果应该很显然：

outline-color: red;

outline-color:#000;

outline-color: rgb(50%,50%,50%);

这里可能存在一个缺点，轮廓颜色有可能与其周围的像素颜色很接近，这种情况下用户将无法看清。正因如此才定义了invert。

类似于轮廓样式和宽度，对整个轮廓只能定义一种颜色。

汇总

类似于设置边框样式的border属性，轮廓也有一个简写属性outline，允许一次就完成轮廓样式、宽度和颜色的设置。

outline

值：[||||]| inherit

初始值：对简写属性未定义

应用于：所有元素

继承性：无

计算值：见各个属性（outlinf color等等）

与其他简写属性类似，outline把多个属性汇总为一个简洁的记法。它与其他简写记法的行为相同，会覆盖先前定义的值。因此，在以下例子中，轮廓会使用颜色关键字invert，因为这是第二个声明指示的颜色（默认值）：

a:focus {outline-color: red; outline: thick solid;}

由于给定轮廓必须采用某种统一的样式、宽度和颜色，所以outline是关于轮廓的唯一简写属性。对于轮廊没有诸如outline-top或outline-right之类的属性。

如果你想模拟一个反色边框，可以先设置一个轮廓，为其宽度指定一个长度值，然后设置该元素的外边距等于或大于该宽度。

div#callbox {outline: 5px solid invert; margin: 5px;}

input:focus {Outline: 1em double gray;}

前面曾提到过，轮廊不会参与到文档流中。因此即使因为焦点的改变使轮廓从一个链接移动到另一个链接上，也不会导致文档重新显示。如果创作人员使用边框指示焦点，文档布局就会不停地变化和跳跃。在网页设计时，轮廓可以得到与边框同样的效果，但不会导致跳跃。

之所以轮廊可以做到这一点，原因在于：根据定义，轮廓画在元素框余下部分之上。由于CSS2中轮廓不会覆盖其元素框的可见部分，而只可能覆盖外边距（透明外边距），所以这不算大问题。如果CSS的将来版本允许轮廓向里移，能覆盖边框或元素框的其他可见部分，轮廓的放置就会变得更重要。

遗憾的是，CSS2有一些方面很含糊，其中包括它明确地拒绝定义两个轮廓相互重叠时的行为，也没有定义元素被其他元素部分模糊时对其轮廓会有怎样的影响。这些问题可以用一个例子来说明：

div#one {outline: 1em solid invert ;}

div#.two {outline: 1em solid invert; margin:-2em -2em 0 2em; background: white;}

现在假设在文档中div#two就在divi#one之后。它会与第一个div重叠，其背景将与第一个div轮廊的一部分重叠。这里没有提供此代码块的示意图，因为CSS2规范对于会发生什么情况没有任何说明。是第一个div的轮廓可见，覆盖第二个div的背景和内容吗？这两个反色轮廊会在某些地方相交，那里会发生什么？像素会反色两次吗（相应地最终恢复为其原来的状态）？或者像素是不是只反色一次，然后不再改变？我们无从知道。这里无论怎么讲都不能说对也不能说错，而只是一种可能的结果，它不一定是用户代理最终的实现，也不一定是CSS将来版本所定义的行为。

网站名称：如何在网页设计中设置轮廓颜色
转载来源：https://www.cdcxhl.com/news36/164936.html

成都网站建设公司_创新互联，为您提供品牌网站建设、微信小程序、响应式网站、面包屑导航、网站改版、网站营销

广告

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