在浏览各种APP及网站，往往会发现很多酷炫的布局及样式。搜集一下，补充自己的技能库，借鉴学习一下。
HTML
<h1>Stack of Cards</h1>
<div class="card">
<p>Here's some content. </p>
</div>
<div class="card card-dark">
<p>Here's a stack of dark cards. </p>
</div>
<div class="card card-primary">
<p>Here's some more content of another type with a lot more content. </p>
<p>And it doesn't end there. It just keeps on going. </p>
<ul>
<li>Stuff</li>
<li>And other stuff</li>
<li>Never ending card</li>
</ul>
</div>
<div class="card card-secondary">
Here's yet another card with another color.
</div>
CSS
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600);
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 2rem 0.5rem;
background-color: #c4c8cc;
color: #404448;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4;
}
h1 {
margin: 0 0 2rem;
font-weight: 400;
line-height: 1.1;
text-align: center;
}
p {
margin: 0 0 1.4em;
}
ul {
margin: 0 0 1.4em;
padding: 0;
padding-left: 1.15em;
/**
* The card stack mixin.
*
* @param color $card-color Main color of the card stack. Defaults to white.
* @param color $shadow-color Color of the shadow. Defaults to black.
*
* @return box-shadow Applies a box shadow to the element.
*/
list-style-type: square;
}
.card {
margin: 0 auto 2rem;
padding: 1rem;
min-width: 10rem;
max-width: 20rem;
background-color: white;
word-wrap: break-word;
box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.1), 0 0.5em 0 -0.25em #f2f2f2, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #e5e5e5, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1);
}
.card.card-primary,
.card.card-dark {
color: white;
}
.card.card-primary {
background-color: tomato;
text-shadow: 0 0.0625em 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.1), 0 0.5em 0 -0.25em #f25e43, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #e5593f, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1);
}
.card.card-secondary {
background-color: #47e3ff;
box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.1), 0 0.5em 0 -0.25em #43d7f2, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #3fcce5, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1);
}
.card.card-dark {
background-color: #404040;
box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.1), 0 0.5em 0 -0.25em #3c3c3c, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #393939, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1);
}
.card >:last-child {
margin-bottom: 0;
}
微信扫一扫 
支付宝扫一扫 
