前言
Material Design 是由 Google 推出的一套全新的设计语言，为了在不同平台和设备上的应用程序中提供一致的用户体验。卡片（Card）是 Material Design 中非常常见的 UI 元素，下面我们就来讲讲如何根据 Material Design 规范打造优美的卡片设计。
规范
在开始设计卡片之前，我们需要了解 Material Design 中对于卡片的规范。卡片在 Material Design 中的定义是一个具有独立内容的矩形区域，可以包含图片、文本、操作等，类似于纸牌。卡片的特点是阴影、圆角、边距和填充，它们都是为了增强卡片的可见性和可操作性。
Material Design 规范中对于卡片的几个重要属性如下：
阴影
卡片具有逐层递减的阴影，使其看起来浮动在原来的背景之上。阴影越靠近卡片，其模糊度越低。
圆角
卡片通常具有四个圆角，如果出现了不同的圆角，也会使其看起来更加三维。
边距
卡片应该有明确的边距，使其能够与其它卡片或页面元素分开，并在整个布局上进行可伸缩。
填充
卡片应该包含一个或多个元素，这些元素应该具有足够的间距和填充，以使其在卡片的大小和设计上看起来一致。
设计
了解了 Material Design 的规范后，下面我们就来看看如何根据这些规范来设计一个优美的卡片。
HTML 结构
在开发中，我们可以使用 HTML 和 CSS 来创建卡片。 卡片可以是一个 div，其 CSS 属性设置为卡片规范中所描述的内容：边距、圆角、填充和阴影。
<div class="card">
<img src="image.jpg" alt="image">
<div class="card-content">
<h3>This is the title</h3>
<p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button>Read more</button>
</div>
</div>样式
在创建 HTML 结构后，我们来添加样式，以使卡片符合规范。我们可以使用 CSS 属性，如 box-shadow、border-radius、margin 和 padding 来完成。
-- -------------------- ---- -------
----- -
----------- - --- --- - ------- -- -- ------
- --- --- - ------- -- -- ------
- --- --- ---- ------- -- -- -----
-------------- ----
-------- -------------
------- ------
------- -----
------ ------
-
----- --- -
----------------------- ----
------------------------ ----
------- ------
----------- ------
------ -----
-
------------- -
-------- -----
-颜色
在 Material Design 中，颜色也是非常重要的。我们可以使用 Material Design 的预定义颜色来设置卡片的颜色，以使其与整个布局一致。你可以访问 material.io 来选择使用的颜色。
-- -------------------- ---- ------- ----- - ----------------- -------- - ------------- -- - ------ -------- - ------------- - - ------ -------- - ------------- ------ - ----------------- -------- -------------- ---- ------- ----- ------ -------- ------- -------- ---------- ----- ------- ----- ------- --- -- --------------- ---------- ------ ----- -
总结
卡片是 Material Design 中重要的 UI 元素，其代表了一个具有独立内容的矩形区域。为了创建优美的卡片设计，我们需要了解 Material Design 的规范，并使用 HTML 和 CSS 来完成。通过使用预定义的样式和颜色，我们可以使卡片看起来非常美观并且具有操作性。
希望这篇文章能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518d9ee95b1f8cacd11c3e7