双框/边框? CSS可能吗? [英] Double box/border? Is this possible in CSS?

问题描述

我正在尝试在CSS中重新创建此图像.

I'm trying to recreate this image in CSS.

到目前为止，这是我从实验中得到的.我用盒子阴影作为第二个盒子.我不确定是否有更好的方法可以做到这一点?

This is what I got from experimenting, so far. I used box-shadow to act as the second box. I'm not sure if there's a better way to do this?

h4 {
  font-family: sans-serif;
  text-transform: uppercase;
  text-align: center;
  border: solid 3px black;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  color: black;
  letter-spacing: 2px;
  padding: 20px 15px;
  background: white;
  box-shadow: 10px 5px 0px 0px #ffffff, 11px 7px 0px 2px #000000;
}

<h4>3. Scouting for a location</h4>

推荐答案

您可以通过绝对位置伪元素来实现.还应避免通过CSS继承进行属性重复.

You can achieve this via absolutely position pseudo element. Also avoid property duplication via CSS inheritance.

.border {
  text-align: center;
  border: solid 3px black;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  color: black;
  letter-spacing: 2px;
  padding: 20px 15px;
  margin: 15px 15px;
  background: white;
  
  position: relative; /* new */
}

/* new */
.border:after {
  content: "";
  position: absolute;
  display: block;
  background: inherit;
  border-radius: inherit;
  border: inherit;
  left: 2px;
  top: 2px;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<div class="border">3. Scouting for a location</div>

这篇关于双框/边框? CSS可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！