border-top-color
#9b9c9d
,border-bottom-color
#f6f9fc
。渐变旨在将border-left
上的顶部颜色转换为底部颜色并border-right
。
如何将border-left-image
和border-right-image
与border-top-color
和border-bottom-color
混合?
.HTML
<a class="button-style">Evil Whales</a>
.CSS
.button-style
{
background: linear-gradient(to bottom,
rgba(129,232,117,1) 0%,
rgba(129,232,117,1) 50%,
rgba(62,179,48,1) 51%,
rgba(62,179,48,1) 100%);
border-top-color: #9b9c9d;
border-left-image: linear-gradient(to bottom,
rgba(155,156,157,1) 0%,
rgba(246,249,252,1) 100%);
border-bottom-color: #f6f9fc;
border-right-image: linear-gradient(to bottom,
rgba(155,156,157,1) 0%,
rgba(246,249,252,1) 100%);
border-style: solid;
}
你可以堆叠两个渐变并使用background-size
、padding
和background-clip
来绘制border
:
.button-style {
background: linear-gradient(to bottom, rgba(129, 232, 117, 1) 0%, rgba(129, 232, 117, 1) 50%, rgba(62, 179, 48, 1) 51%, rgba(62, 179, 48, 1) 100%) no-repeat
/* use for background */
, linear-gradient(to bottom, rgba(155, 156, 157, 1) 0%, rgba(246, 249, 252, 1) 100%)
/* use for border */
;
background-size: 100% 100%, auto auto;
background-clip: content-box, border-box;
padding: 3px;
}
html {
padding: 3em;
background: gray;
<a class="button-style">Evil Whales</a>
让它工作,尽管只是在Chrome中,Firefox和IE不起作用。
background: linear-gradient(to bottom,
rgba(129,232,117,1) 0%,
rgba(129,232,117,1) 50%,
rgba(62,179,48,1) 51%,
rgba(62,179,48,1) 100%);
border-image: linear-gradient(to bottom,
rgba(155,156,157,1) 0%,
rgba(246,249,252,1) 100%) 25 30 10 20 repeat;
border-image-repeat: stretch;
border-width: 4px;
应该注意的是,没有border-left-image
和相关属性;不幸的是,没有一个更好的CSS属性。