利用css3linear-gradient实现购物车地址选择信封效果实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了利用css3linear-gradient实现购物车地址选择信封效果实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1713字，纯文字阅读大概需要3分钟。

内容图文

对于css3的渐变前端的童鞋一定不陌生，在一些电商网站会为了美化将地址选择做成信封样式（个人感觉很稀饭~），看了一下它的实现方式，大多数是以图片的形式，持着优化的心态尝试着用css3 linear-gradient实现信封效果一下是效果图

下面我们开始喽~

html结构如下：

<p class="letter-box">
<p class="letter-border">

</p>
</p>

css样式如下：

.letter-box{
width: 278px;
height: 176px;
padding: 5px;
box-sizing: border-box;
}
.letter-border{
width: 100%;
height: 100%;
background: #fbfaf5;
}

渐变是写在letter-box上的，然后letter-border用颜色遮住中间的部分。

接下来我们对letter-box写渐变，首先我们先来分析一下图上边的渐变其实一共有三个颜色白色、红色和蓝色。我们都知道在用linear-gradient的时候除了最开始的时候定义渐变的角度我们还要定义颜色和颜色所占的比例，颜色我们现在已经知道了，那么我们现在来说一下这个比例怎么确定。

观察效果图我们可以找到规律一个红色、一个白色、一个蓝色、一个白色为一个循环，那么我们的规律数为4，我们的比例用100%/（我们的规律数*2）=12.5%就是我们的比例。解释一下为什么要用我们的规律数*2,不应该是规律数是一个组合吗？NO!把一个组合数的颜色放在一个正方体里边，为了方便大家理解p了一个效果图

这个应该很直观了我们把大的box看成是以小正方体为单位repeat的就可以了

.letter-box{
width: 278px;
height: 176px;
padding: 5px;
box-sizing: border-box;
background: linear-gradient(45deg,#f25953 12.5%,#fbfaf5 12.5%,#fbfaf5 25%,#5590d6 25%,#5590d6 37.5%,#fbfaf5 37.5%,#fbfaf5 50%,#f25953 50%,#f25953 62.5%,#fbfaf5 62.5%,#fbfaf5 75%,#5590d6 75%,#5590d6 87.5%,#fbfaf5 87.5%,#fbfaf5 100%);
background-size: 70px 70px;
}

以上就是利用css3 linear-gradient实现购物车地址选择信封效果实例的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的利用css3linear-gradient实现购物车地址选择信封效果实例全部内容，希望文章能够帮你解决利用css3linear-gradient实现购物车地址选择信封效果实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---