Question

我希望能够在不将渐变应用于元素本身的情况下将渐变应用于边框。 webkit documentation for doing this暗示它应该是可能的，但我无法想出一种创建黑盒子的方法，周围有渐变边框。据我所知，它是webkit的一个错误。这是我的CSS：

div {
    border-width: 10px 10px 10px 10px;
    width: 75px;
    height: 75px;
    background-color:#000;
    -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff)) 21 30 30 21;
}

如果您自己尝试使用此代码并在chrome或safari中运行，您将看到webkit将border-image渐变应用于整个元素，而不是仅应用于边框。有没有办法用CSS来完成我正在寻找的东西，而不使用任何图像？谢谢！

Answer 1

WebKit中的border-image实现（我相信，所有当前发布的浏览器）都基于背景和边框模块的2008 draft。你想要的是具有fill关键字的currently specced behaviour：

'fill'关键字（如果存在）会导致保留border-image的中间部分。（默认情况下，它被丢弃，即被视为空。）

不幸的是，在浏览器赶上规范之前，你必须采用像Gareth这样的解决方案。

Answer 2

如果您不反对在标记中添加非语义div，您可以尝试在div中添加div来实现您之后的效果：

<body>
   ...stuff
   <div id="fauxborder">
      <div>
         ...content here...
      </div>
   </div>
   ...more stuff
</body>

CSS：

#fauxborder {
    width:95px; 
    height:95px; 
    background-image: -webkit-gradient(...)
}
#fauxborder div {
    margin:10px;
    background-color:#000
}

Answer 3

http://jsfiddle.net/nicktheandroid/b875w/1/

我让它工作......浏览器仍然不允许你更改fill关键字。

使用-webkit-border-image将CSS边框应用于元素

3 个答案: