Question

我被要求在CSS中重新创作一些艺术作品，我试图在边框上添加边框。我这里有2张图片，一张是我目前的进展，另一张是艺术作品。

我的目标是什么：
https://i.imgur.com/qm123J5.png

有没有简单的方法可以做到这一点？

#bottom-bar {
    position: fixed;
    background-color: #2F2F2F;
    border-top: 1.8px solid #5f5f5f99;
    border-bottom: 1px solid #5f5f5f99;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    z-index: 2000;
}

Answer 1

您可以使用插入框阴影制作多个边框

＆＃13;

div{
  width:100px; height:100px; 
  box-shadow:  inset 0 0 0 10px black,
               inset 0 0 0 20px grey;
}

＆＃13;

<div></div>

＆＃13;

诀窍是逐渐使用更大的传播＆＃34;阴影＆＃34;，因为它们被之前的那些覆盖。例如，要在另一个10px边框之后制作10px边框，您需要将其声明为下方并使用20px作为边界展开。

仅对于单面，使用负展开和垂直偏移，如下所示：

＆＃13;

div{
  width:100px; height:100px; 
  border:1px solid red;
  box-shadow: inset 0 20px 0 -10px black,
       inset 0 30px 0 -10px grey;
}

＆＃13;

<div></div>

＆＃13;

CSS：边境边境？

1 个答案: