css实现边框：圆角+渐变

maxiaole_z

于 2022-08-01 18:01:35 发布

阅读量604

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签： css 前端微信小程序

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/maxiaole_z/article/details/126106596

小程序专栏收录该内容

7 篇文章

订阅专栏

这段CSS代码展示了如何创建一个具有渐变背景效果的列表项。它使用了`display:flex`进行布局，并通过`linear-gradient`定义了两种颜色的垂直渐变，同时设置了边框和圆角。此代码适用于前端开发中的界面美化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上搜的说的太多，自己记录下

.list {
       display: flex;
       flex-direction: column;
       border: solid 2rpx transparent;
       border-radius: 12rpx;
       background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(to right, rgba(215, 115, 163, 1), rgba(104, 210, 230, 1));
       background-origin: border-box;
       background-clip: content-box, border-box;
       margin: 0 24rpx 16rpx;
   }

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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