css怎么做打勾的方框

CSS是一种用于网页样式设计的语言，它可以让网页看起来更美观，易于阅读。在CSS中，我们可以使用众多不同的属性来实现不同的效果，如边框、背景、颜色、排版等等。

其中，边框是CSS中常用的一个属性，我们可以设置边框的颜色、宽度和样式。今天，我们就来学习一下如何使用CSS来制作一个带有打勾的方框。

.Box {
  width: 100px;
  height: 100px;
  border: 2px solid #ccc;
  position: relative;
}

.check {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  background-color: #00cc00;
  border-radius: 50%;
  -webkit-transform: scale(0.8) rotate(-45deg);
  transform: scale(0.8) rotate(-45deg);
  transition: all 0.2s ease-in-out;
  opacity: 0;
}

.Box:hover .check {
  opacity: 1;
}

以上代码主要分为两个部分：

1.定义一个外层容器.Box，设置它的宽度、高度、边框

2.定义一个内层容器.check，设置它的样式和位置，然后使用hover伪类来控制其显示和隐藏。

在第二部分中，我们使用了CSS3中的transform属性来旋转和缩放元素，从而制作出了打勾的形状。同时也用到了transition属性来实现过渡效果。其中，-webkit-前缀是为了兼容性考虑，可以加上也可以不加。

使用以上代码，我们就可以制作出一个带有打勾的方框了。大家可以根据需要对其样式进行调整，实现自己想要的效果。