将CSS边框应用于具有-webkit-border-image的元素

我希望能够将渐变应用于边框而不将梯度应用于元素本身。 webkit documentation for doing this意味着它应该是可能的，但我不能想出创建一个黑盒子的方式，周围有一个渐变边框。据我所知，它是一个webkit的bug。这里是我的CSS：将CSS边框应用于具有-webkit-border-image的元素

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的适用边界图像渐变到整个元素，而不是只是边界。有什么方法可以完成我在用CSS查找的内容，而不使用任何图像？谢谢！

来源

2011-02-17 D-Nice

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

中的“填写”关键字，如果存在的话，会导致边界图像的中间部分被保留。（默认情况下，它被丢弃，即作为空对待。）

不幸的是你必须与像加雷的溶液中去，直到浏览器赶上规范。

来源

2011-02-18 00:36:05 robertc

如果你不反对将非语义div到您的标记，你可以尝试把一个div一个div内acheive效果你以后是这样的：

<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 
}

来源

2011-02-17 23:49:57 Gareth

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

我得到它的工作......而浏览器仍然没有让你改变填充关键字。

来源

2011-10-16 05:03:32

将CSS边框应用于具有-webkit-border-image的元素

回答

相关问题