gpt4 book ai didi

border-left-image 和 border-right-image 上的 CSS border-image 渐变与 border-color 混合

转载 作者:行者123 更新时间:2023-11-28 06:15:20 28 4
gpt4 key购买 nike

border-top-color#9b9c9dborder-bottom-color#f6f9fc .渐变旨在border-leftborder-right 上将顶部颜色过渡到底部颜色。

如何将 border-left-imageborder-right-imageborder-top-colorborder 混合使用-底色?

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-sizepaddingbackground-clip 来绘制边框:

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

关于border-left-image 和 border-right-image 上的 CSS border-image 渐变与 border-color 混合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35927981/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com