写在前面
最近，在做一个新项目，考虑用Tailwind CSS来实现UI效果，这个新出来的CSS框架，很多人说，它是一个用了会上瘾的框架，虽然出来时间不长，但是他的火爆程度，直接向bootstrap靠近，当然，好不好用，这个看每个人的主观感觉。
如果你想学习新东西的话，可以去试试，我也是刚刚开始用，我一直觉得，框架这种东西就是锦上添花的，可以帮助我们提升工作效果，但并不一定适合所有项目，至于用什么框架工具，还是需要根据自己需求来，需要具体情况具体分析，然后结合各框架工具特点，才能把工具用到极致。
当然，框架我们需要会用，原生的CSS，也需要会写，因此，今天，我们继续来练习一个CSS的小项目，最终的效果如下：
<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【每日一练】15—CSS实现好看的卡片效果</title></head><body><div class="container"><div class="card"><div class="icon"><ion-icon name="diamond-outline"></ion-icon></div><div class="content"><h2>什么是Tailwind CSS</h2><p>就是一个 CSS 框架，和你知道的 bootstrap，element ui，Antd，bulma。一样。将一些 css 样式封装好，用来加速我们开发的一个工具。</p></div></div><div class="card"><div class="icon"><ion-icon name="earth-outline"></ion-icon></div><div class="content"><h2>什么是Tailwind CSS</h2><p>就是一个 CSS 框架，和你知道的 bootstrap，element ui，Antd，bulma。一样。将一些 css 样式封装好，用来加速我们开发的一个工具。</p></div></div><div class="card"><div class="icon"><ion-icon name="rocket-outline"></ion-icon></div><div class="content"><h2>什么是Tailwind CSS</h2><p>就是一个 CSS 框架，和你知道的 bootstrap，element ui，Antd，bulma。一样。将一些 css 样式封装好，用来加速我们开发的一个工具。</p></div></div></div><script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script><script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script></body></html>
*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Ubuntu', sans-serif;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #3c2846;}.container{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}.card{position: relative;width: 320px;height: 450px;margin: 30px;background: #287bff;border-radius: 20px;display: flex;justify-content: center;align-items: flex-start;overflow: hidden;border-bottom-left-radius: 160px;border-bottom-right-radius: 160px;box-shadow: 0 15px 0 #fff,inset 0 -15px 0 rgba(255,255,255,0.25),0 45px 0 rgba(0,0,0,0.15);}.card::before{content: '';position: absolute;top: -150px;left: -40%;filter: blur(5px);width: 100%;height: 150%;transform: rotate(35deg);background: linear-gradient(90deg,transparent,rgba(255,255,255,0.2));pointer-events: none;}.card:nth-child(1){background: linear-gradient(to bottom,#ff2ae0, #64b5f6);}.card:nth-child(2){background: linear-gradient(to bottom,#ffec61, #f321d7);}.card:nth-child(3){background: linear-gradient(to bottom,#24ff72, #9a4eff);}.card .icon{position: relative;width: 140px;height: 120px;background: #3c2846;border-bottom-left-radius: 100px;border-bottom-right-radius: 100px;display: flex;justify-content: center;align-items: flex-start;box-shadow: 0 10px 0 rgba(0,0,0,0.1),inset 0 -8px 0 #fff;z-index: 1000;}.card .icon ion-icon{color: #fff;position: relative;font-size: 6em;z-index: 1;--ionicon-stroke-width: 24px;}.card .icon::before{content: '';position: absolute;top: 0;left: -50px;width: 50px;height: 50px;background: transparent;border-top-right-radius: 50px;box-shadow: 15px -15px 0 15px #3c2846;}.card .icon::after{content: '';position: absolute;top: 0;right: -50px;width: 50px;height: 50px;background: transparent;border-top-left-radius: 50px;box-shadow: -15px -15px 0 15px #3c2846;}.content{position: absolute;width: 100%;padding: 30px;padding-top: 140px;text-align: center;}.content h2{font-size: 1.75em;color: #fff;margin-bottom: 10px;}.content p{color: #fff;line-height: 1.5em;}
写在最后
以上就是我们今天的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
PS：我在视频号上新开了一个【每日听书】的读书学习栏目，我会分享一些我精选的图书内容，然后通过人工智能主播的形式，把图书内容阅读给你听，下面是我们的听书视频内容，希望对你用。
web前端开发的视频
，赞 8
学习更多技能
请点击下方公众号
