css能做什么-border篇1

内容预告：这里不会告诉你什么是border，怎么用border，而是让你知道它们能做到什么

先来看一个效果，这便是我们的目标，它主要使用border和background实现

现在，我们来一步步的实现它

一般情况下我们使用border时可能如下写

.card{  
  border: #ccc solid thin;  
}

可是如果我们如下写呢，将border的宽设置为一个很大的值，并且对其背景设置为渐变

.card {
   width: 100px;
   height: 100px;
   border: 50px transparent solid;
   background: linear-gradient(#000, #0000);
}

上面将产生如下效果，可以看到内容区的渐变同时会对border产生影响，可以看成内容区渐变的上部分应用到了下border，而其上部分应用到了上border。

那如果我们再来点小修改，将其渐变变为阶段性的渐变，又会如何

.card {
   width: 100px;
   height: 100px;
   border: 50px transparent solid;
   background: linear-gradient(#000 30%, transparent 30%, transparent 100%);
}

现在我们继续将渐变的黑色区域减小，可以看到其变成了2条直线

.card {
   width: 100px;
   height: 100px;
   border: 50px transparent solid;
   background: linear-gradient(#000 1px, transparent 1px, transparent 100%);
}

有人可能说这和我们直接设置上下border有什么区别呢，别急，让我们以同样的方式添加一个横向的渐变，可以看到边框呈现为一个井字形，这越来越接近我们的目标了。

.card {
   width: 100px;
   height: 100px;
   border: 50px transparent solid;
   background: linear-gradient(#000 1px, transparent 1px, transparent 100%),  
linear-gradient(90deg, #000 1px, transparent 1px, transparent 100%);
}

相比我们的目标，目标的效果和我们当前的效果差距是目标效果的井字形上还有一个边框，于是我们再添加一个outline，除此之外，们稍微将border的宽度变小点

.card {  
  --w: 14px;  
  width: 100px;  
  height: 100px;  
  border: var(--w) transparent solid;  
  background: linear-gradient(#000 1px, transparent 1px, transparent 100%),  
  linear-gradient(90deg, #000 1px, transparent 1px, transparent 100%);  
  outline-offset: -8px;  
  outline: 1px solid #000;
}

最后，是时候完成我们的目标了，将这个card类应用到一张图片上，并且给card添加一个padding，修改下颜色

.card {  
  --w: 14px;  
  width: 100px;  
  height: 100px;  
  border: var(--w) transparent solid;  
  background: linear-gradient(#ccc 1px, transparent 1px, transparent 100%),  
  linear-gradient(90deg, #ccc 1px, transparent 1px, transparent 100%);  
  outline-offset: -8px;  
  outline: 1px solid #ccc;
  padding: 8px;
}

<img src="https://assets.codepen.io/10903102/cat.jpg" alt="可爱的小猫" class="card">