条纹背景

?> 背景知识：:point_right: gradient, linear-gradient, radial-gradient, repeating-linear-gradient

进度条

Work overtime today.

<script v-pre type="text/x-template" id="demo1"> <style> main { width: 100%; padding: 80px 0px; display: flex; flex-wrap: wrap; justify-content: space-around; } .progress-outer { width: 60%; height: 12px; border-radius: 8px; overflow: hidden; position: relative; } .progress-enter { height: inherit; background: rgba(180, 160, 120, .2); } .progress-bg { width: 60%; height: inherit; border-radius: 6px; background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%, #D9CFBB 0, #D9CFBB 75%, #C3B393 0); background-size: 16px 16px; animation: panoramic 20s linear infinite; } </style>

<script> </script> </script>

不规则卡片

Today's work is seriously overtime.

<script v-pre type="text/x-template" id="demo2"> <style> main { width: 100%; padding: 80px 0px; display: flex; flex-wrap: wrap; justify-content: space-around; } .coupon-card { width: 200px; height: 120px; background-image: radial-gradient(circle at 100px -8px, transparent 20px, #b4a078 21px); } </style>

<script> </script> </script>

示例中为了实现:hover时有贴边的阴影，所以采用了radial-gradient。如果你有更好的办法，欢迎留言~

推荐

《CSS揭秘》作者Lea Verou使用CSS3渐变实现的图案库Patterns Gallery，还有它的SVG版本SVG Patterns Gallery，有兴趣的可以去研究一下作者的实现原理。

cinwell website

浏览器支持

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-gradients&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>