我偶然发现了一些奇怪的东西。向元素应用白色虚线边框时,背景渐变的颜色出现在元素的错误一侧,如下所示:
我在最新版本的 Firefox、Chrome、Opera 和 IE10 中看到过这种情况。然而,IE9 有我想要的效果。
我的 css 目前是:
aside.block {
width: 259px;
padding: 12px;
margin: 15px 0;
border: 2px dashed #fff;
background-image: -o-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec00', endColorstr='#dbcb00');
}
左侧和右侧的边框颜色很好,但由于几乎所有浏览器都会出现这种情况,所以我不得不假设这是我的错误,而不是浏览器错误。我在这里缺少什么?
最佳答案
您可以通过将 background-origin
设置为 border-box
来解决这个问题。
.block{
width: 259px;
padding: 12px;
background-image: -o-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -moz-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: -ms-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
background-image: linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec00',endColorstr='#dbcb00');
border: 2px dashed #fff;
background-origin:border-box;
}
关于css - 为什么在应用背景渐变时边框颜色会反转?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11717873/