CSS技能点--带投影的卡片区域

点此查看 所有教程、项目、源码导航

1. 场景

我们经常使用类似卡表的结构，来放置商品信息、人员信息等，例如下图即为小米官网的一个产品卡片区域。

通过使用圆角、投影等CSS样式，可以描绘出一个比较好看的卡片区域。

2. 实现过程

第1步，添加HTML卡片区域：

 	<div class="card">
        <h1>春晓</h1>
        <p>春眠不觉晓</p>
        <p>处处闻啼鸟</p>
        <p>夜来风雨声</p>
        <p>花落知多少</p>
    </div>

第2步，添加边框，然后设置内边距，然后设置边框弧度让卡边更圆润。

 		.card {
            border: 1px solid rgb(219, 207, 207);
            padding: 12px;
            border-radius: 12px;
        }

此时效果如下：

第三步，通过添加阴影，让卡片更具立体感，一般阴影的颜色可以选择跟边框差不多的颜色，阴影的水平、垂直、模糊的距离可以根据情况设定，一般不宜过大。

		.card {
            border: 1px solid rgb(219, 207, 207);
            padding: 12px;
            border-radius: 12px;
            box-shadow: 3px 3px 6px rgb(219, 207, 207);
        }

此时效果如下：

3. 小结

圆角更圆润，投影更立体，小小技巧能让网页增添一些色彩。