gpt4 book ai didi

html - CSS - 按钮边框渐变

转载 作者:行者123 更新时间:2023-12-05 01:27:26 28 4
gpt4 key购买 nike

<分区>

在广泛搜索之后,我一直在思考如何在 CSS 中复制这个按钮,特别是边框,因为如果可能的话,我打算在其他元素上使用它。

设计好的按钮

Button with top-right gradient border

button.rounded-button {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1.125rem 2rem;

position: absolute;
width: 13.5919rem;
height: 4.375rem;

background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(0.7942rem);

border-radius: 5.8652rem;
border-image-slice: 1 1 0 0;
border: 1px solid;
border-image-source: linear-gradient(257.34deg, #FFFFFF 4.56%, rgba(255, 255, 255, 0) 29.19%);

font-size: 1.25rem;
line-height: 2.125rem;
color: #fff;
}

body {
background: #393939;
}
<!-- SVG Not included with the example -->
<button type="button" class="rounded-button">
Watch video
<!-- <img src="/assets/img/glyphs/ic-play.svg" alt="Watch video"> -->
</button>

理想情况下,我希望有一个可以应用于任何元素的类,它可以添加所需的效果并且可以反转,我已经尝试过伪元素,例如 :after 但没有成功

我真的不确定这是否可以在纯 css 中实现🤦🏻‍♂️

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