CSS盒子border渐变

1.需求盒子(按钮)border是渐变色
2.解决方案
只需要用到单层元素,为其分别设置 background-clip、background-origin、background-image 这三个属性,每个属性设置两组值,第一组用于设置border内的单色背景,第二组用于设置border上的渐变色。

<view class="buttons">
					<view class="btnA">重置</view>
					<view class="btnB">完成</view>
				</view>

	.buttons {
    
    
			width: 100%;
			display: flex;
			justify-content: space-between;
			.btnA {
    
    
				width: 318rpx;
				height: 90rpx;
				color: #21C0D5;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2px solid transparent;
				border-radius: 45rpx;
				background-clip: padding-box, border-box;
				background-origin: padding-box, border-box;
				background-image: linear-gradient(to right, #FFFFFF, #FFFFFF), linear-gradient(90deg, #63B2ED, #12C3D0);
			}
			.btnB{
    
    
				width: 318rpx;
				height: 90rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 45rpx;
				background: linear-gradient(136deg, #63B2ED 0%, #12C3D0 100%);
			}
		}

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44705979/article/details/128645681
今日推荐