为了账号安全,请及时绑定邮箱和手机立即绑定

实现信封效果的两种方式

2021.01.08 09:28 206浏览

实际开发过程中会遇到这样的样式需求

http://img3.sycdn.imooc.com/5ff7b3cf00012e1905170407.jpg

  1. 边框方式

border-bottom: 4px solid;
border-image: repeating-linear-gradient(45deg,#FFBAB2 0,#FFBAB2 65rpx,#ffffff 65rpx,#ffffff 105rpx,#C4E4FF 105rpx,#C4E4FF 170rpx,#ffffff 170rpx,#ffffff 210rpx) 20;

    2.背景方式

width: 100%;
height: 4px;
background: repeating-linear-gradient(45deg,#FFBAB2 0,#FFBAB2 65rpx,#fbfaf5 65rpx,#fbfaf5 130rpx,#C4E4FF 130rpx,#C4E4FF 195rpx,#fbfaf5 195rpx,#fbfaf5 260rpx);


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消