Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

边框颜色的计算

  通常使用边框时都会直接一次性设置上边框的宽度、样式、颜色。只针对颜色的设置会使用border-color属性。实际上影响边框颜色的属性不仅仅是border-color。当border-color为默认值initial时,边框的颜色会根据当前元素的color来设置。
  color这个属性影响的不仅仅是文字颜色,还会影响下划线、上划线、删除线、边框、轮廓,等这些东西的颜色。下面这个例子可以观察到border-color在不同取值下的边框颜色。
<style>
div {color:blue;}
span {border:5px solid;color:red;}
</style>
<div><span id="span">test</span></div>
<hr/>
span.borderColor=<select onchange="span.style.borderColor=this.value">
  <option value="initial">initial 默认值,使用当前color</option>
  <option value="inherit">inherit 继承自父元素的border-color</option>
  <option value="green">green 颜色常量,绿色</option>
</select>

  由于样式中没有设置SPAN元素的border-color,初始状态使用它自身的color作为颜色,所以边框是红色的。而当border-color修改为inherit时它会使用父元素的的border-color值,而父元素的这个值也为initial,所以父元素也会从它自己的color属性上取值,然后再继承到SPAN上。在控制台执行下面代码就可以看到DIV元素的borderColor值
getComputedStyle(document.querySelector("div")).borderColor
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^