• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

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

    • 2019-06-12 16:34:57
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.com

    设置轮廓颜色

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

    outline-color

    值:<color>| invert | inherit

    初始值:invert(或用户代理特定的值,见正文说明)

    应用于:所有元素

    继承性:无

    计算值:根据指定确定

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

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

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

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

    outline-color: red;

    outline-color:#000;

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

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

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

    汇总

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

    outline

    值:[<outline-color>||<outline-style>||<outline-width>]| 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将来版本所定义的行为。

    当前文章标题:如何在网页设计中设置轮廓颜色

    当前URL:http://www.0737dz.com/news/wzzz/3043.html

    上一篇:网页设计中的轮廓

    下一篇:认识网页和网站

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图