css 钥匙icon怎么做

CSS 钥匙 icon 是一种常见的网页设计元素，它可以增加页面的可读性和美观度。这里将介绍如何使用 CSS 创建一个钥匙 icon。

.key {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 50px;
  background-color: #666;
  border-radius: 5px;
}

.key:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 10px;
  width: 10px;
  height: 10px;
  border-top: 7px solid #ccc;
  border-left: 7px solid #ccc;
  border-right: 7px solid #ccc;
  transform: rotate(45deg);
}

.key:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 10px;
  width: 10px;
  height: 10px;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid #ccc;
  border-right: 7px solid #ccc;
  transform: rotate(45deg);
}

首先，我们创建一个 div 元素，设置它的宽度和高度，并为它添加圆角边框。然后，我们使用伪元素 :before 和 :after 来创建钥匙的头和尾。在伪元素中，我们设置它们的位置、大小和边框样式，然后使用 transform 属性来旋转它们，让它们看起来像钥匙。

最后，在 div 元素的样式中，我们设置 display 属性为 inline-block，使钥匙能够在行内显示。可以根据需要调整样式中的各个值，以适应不同的设计需求。