相关疑难解决方法(0)

我正在尝试为一个盒子创建一个样式,其阴影与文本的颜色相同.因为我有几个盒子,每个盒子都有不同的文字颜色,所以我想避免在每个盒子的每个单独的规则集中重复相同的颜色.

现在,Backgrounds和Borders模块指出for box-shadow(也适用于text-shadow):

哪里

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Run Code Online (Sandbox Code Playgroud)

每个组件的组成部分<shadow>解释如下:

• ...

• 颜色是阴影的颜色.如果颜色不存在,则使用的颜色取自"颜色"属性.¹

这意味着如果您没有在给定元素上指定阴影颜色,则必须从为该元素计算的文本颜色中获取所使用的阴影颜色.这与没有明确颜色的边框相关联的行为类似,可以追溯到CSS1并在CSS2中保持不变.

但是,我知道阴影的情况并非总是如此 - 之前(2011年晚些时候!)所选择的颜色留给浏览器来决定文本模块和B&B模块.事实上,我记得过去的测试显示,有些浏览器选择了black其他浏览器,transparent或者完全忽略了阴影风格.这甚至可能在text-shadow和之间有所不同box-shadow.当然,这是可以理解的,因为如上所述,浏览器选择的任何颜色在当时都很好.

但是既然定义已经明确,所有浏览器的最新版本也反映了这一变化,那么我能做些什么来让旧版本效仿呢？我知道我可以多次指定颜色 - 一次用于文本,一次用于每个阴影 - 但就像我说的,如果可能的话我想避免这种情况.

¹ _{请注意,在2012年年中的WD中,这是本文撰写时的最新版本,同一部分的早期声明与此处引用的声明相矛盾,但此处引用的声明是规范的声明; 看到这个邮件列表主题和已经修复的ED.}

我正在尝试使用CSS currentColor作为边框颜色来生成CSS三角形,使用:after content.这在我尝试的所有浏览器中都很有效,除了一个:Safari似乎从它生成的第一个三角形缓存currentColor,然后在任何地方使用它.

以下是我所看到的 - Chrome(以及Firefox和IE9 +)的预期行为:

来自Yosemite 10.10.2上的Safari 8.0.4的不正确行为(在iOS 8.2上相同) - 请注意所有三个三角形都是红色,而不是其元素的currentColor:

这是演示问题的完整代码的小提琴.相关的CSS:

span {
    display: inline-block;
    border-bottom: 2px solid currentColor;
}

span::after {
    /* Generate a triangle (based on Foundation's css-triangle mixin) */
    content:"";
    display: inline-block;
    width: 0;
    height: 0;
    border: inset 0.4em;
    /* Safari seems to cache this currentColor... */
    border-color: currentColor transparent transparent transparent;
    border-top-style: solid;
}

.red { color: #c00; }
.blue { color: #009; }

HTML很简单:

<div>
    <span class="red">Red</span>
    <span>Default</span>
    <span …