主页 / 问题 / 663891
Accepted
Eugen Eray
Asked:2020-05-10 02:45:20 +0000 UTC2020-05-10 02:45:20 +0000 UTC

使用 ::after 在 div 上制作边框

  • 772

我需要一个额外的框架，以后可以将更多内容推送到其中。我没能把它理顺。这是代码。

div.preview-box {position: absolute; width: 70px; height: 60px; background-image: linear-gradient(to top, #252323, rgba(0,0,0, 0.86)); 
border: 1px solid black; border-bottom: 0px;}
div.preview-box::after {content: ""; border: 2px solid #343333; position: fixed; width: 68px; height: 58px;}
<div class="preview-box"></div>

也就是说，框架必须居中并在1px每一侧缩进。

html

2 个回答

  1. div.preview-box {
  position: relative;
  width: 70px;
  height: 60px;
  background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86));
  border: 1px solid black;
}

div.preview-box::after {
  content: "";
  border: 2px solid red; // #343333;
  position: absolute;
  width: 70px;
  height: 60px;
  box-sizing: border-box;
}
    <div class="preview-box"></div>

    • 3
  2. Best Answer

    选项使用box-shadow

    div.preview-box {
  position: relative;
  width: 70px;
  height: 60px;
  background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86));
  border: 1px solid black;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px tomato; /* для примера */
}
    <div class="preview-box"></div>

    • 3

相关问题