其他
【每日一练】15—CSS实现好看的卡片效果
写在前面
最近，在做一个新项目，考虑用Tailwind CSS来实现UI效果，这个新出来的CSS框架，很多人说，它是一个用了会上瘾的框架，虽然出来时间不长，但是他的火爆程度，直接向bootstrap靠近，当然，好不好用，这个看每个人的主观感觉。
如果你想学习新东西的话，可以去试试，我也是刚刚开始用，我一直觉得，框架这种东西就是锦上添花的，可以帮助我们提升工作效果，但并不一定适合所有项目，至于用什么框架工具，还是需要根据自己需求来，需要具体情况具体分析，然后结合各框架工具特点，才能把工具用到极致。
当然，框架我们需要会用，原生的CSS，也需要会写，因此，今天，我们继续来练习一个CSS的小项目，最终的效果如下：
<!DOCTYPE html><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：我在视频号上新开了一个【每日听书】的读书学习栏目，我会分享一些我精选的图书内容，然后通过人工智能主播的形式，把图书内容阅读给你听，下面是我们的听书视频内容，希望对你用。
学习更多技能
请点击下方公众号