背景渐变、边框渐变 (支持ios)、圆角渐变边框、背景阴影

正常的样式:

border: 2px transparent solid;

border-image: linear-gradient(to right, #6D4507, #A77F3F, #E1CA92, #A77F3F) 1 10;

如果出现ios兼容问题

使用下面这个样式:

border: 2px solid #ddd;

border-image: -webkit-linear-gradient(to right,#6D4507, #A77F3F,#E1CA92, #A77F3F) 1 10;

border-image: linear-gradient(to right,#6D4507, #A77F3F,#E1CA92, #A77F3F) 1 10;

圆角渐变边框:

 width: 250px;

 height: 100px;

 background-image: linear-gradient(#fff,#fff),linear-gradient(to bottom right,#6D4507, 
 #A77F3F,#E1CA92, #A77F3F);

 padding: 2px;

 border-radius: 100px;

 background-clip: content-box,padding-box;

背景渐变:

background:linear-gradient(90deg,rgba(83,128,220,1) 0%,rgba(65,102,178,1) 100%);

背景阴影

 box-shadow: 0px 3px 6px 1px rgba(0, 131, 205, .2);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值