html css 扑克牌桌面,CSS Card:纯css制作扑克牌

记得当初在写一个js版本的斗地主程序的时候，我让朋友用ps给我制作了54张扑克牌(是54张吗？)后来想换牌的大小，又不好再让人家做，当时是左右为难，今天在国外的网站上看到了一篇css制作扑克牌的文章，其效果比ps的还要好，叹为观止。其实用到的知识不多，但是国内的同行里面很少能找到有这种专研精神的人(我们的第一反应是copy)。我将这篇文章翻译给大家。

原文如下：

这篇文章中，我将给大家介绍一种简单而吸引人的制作扑克牌的方法，该方法的特点是用纯css实现。这个过程中，你将学到before 和 after的用法，以及一些动画效果。

制作扑克的html代码

第一步是制作扑克的html，我的原则是用最少最简洁的代码，不引用任何图片，也许你认为不可能，但是你还是乖乖的看我是如何工作的吧。

建立一个div，赋予两个class属性：cardand suitdiamonds

往这个div中添加卡片的内容，只需要一个包含字母A的段落标记

就可以了。

A

现在你头脑里要时刻记住，我们的目的不仅仅是要制作一张扑克牌，而且要用最简洁的代码，html部分的代码就只需要这么多了(够简洁吧)。

css代码

css的第一步是规定基本的页面属性，这些属性将被card继承。* {margin: 0; padding: 0;}

body {

background: #00a651;

}

.card {

position: relative;

float: left;

margin-right: 10px;

width: 150px;

height: 220px;

border-radius: 10px;

background: #fff;

-webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);

box-shadow: 3px 3px 7px rgba(0,0,0,0.3);

}

就如上面的代码所示，card 的样式非常简单，白色背景，