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

2022-06-08    分类: 网站建设

设置轮廓颜色

既然在网页设计时可以设置样式和宽度,可以想见,有一个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/news/164936.html

成都网站建设公司_创新互联,为您提供企业建站微信公众号面包屑导航虚拟主机建站公司App开发

广告

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

网站建设网站维护公司