css定义列表设计师二维码名片

现在，设计师们想要给自己的名片加上一个二维码，来快速的让人们通过手机或其他设备进入自己的网站。那么，使用纯CSS去设计这个二维码是非常容易的。

.qrcode {
  position: relative;
  width: 150px;
  height: 150px;
  display: inline-block;
  margin: 20px;
}

.qrcode::before,.qrcode::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: #FFF;
}

.qrcode::before {
  top: 0;
  left: 0;
}

.qrcode::after {
  bottom: 0;
  right: 0;
}

.qrcode span {
  display: block;
  width: 20px;
  height: 20px;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.qrcode .top-left,.qrcode .top-right,.qrcode .bottom-left,.qrcode .bottom-right {
  width: 20px;
  height: 20px;
  background: #000;
  position: absolute;
}

.qrcode .top-left {
  top: 0;
  left: 0;
}

.qrcode .top-right {
  top: 0;
  right: 0;
}

.qrcode .bottom-left {
  bottom: 0;
  left: 0;
}

.qrcode .bottom-right {
  bottom: 0;
  right: 0;
}

这个纯CSS设计的二维码使用了一个相对定位的DIV，通过伪元素:before，:after来添加四个白色的小正方形。 此外，使用了CSS的transform属性来把黑色的正方形放置在中心。对于“时间”这个信息，我们可以添加样式，比如，一个垂直居中的text-align，以及一些字体字号的css。这样，一个美观的名片二维码就完成了，而且完全不需要使用图像来实现。最后，在你的名片上放置这个QR码，宣传你的网站，或者联系方式吧！