我可以添加像边框这样的嵌入阴影吗？

Question

我正在尝试使用box-shadow inset添加边框，因为这种情况我无法在border-box元素之一上使用a。但没有得到。有帮助吗？

.parent{
  background: #FFF;
  padding:5rem;
  box-shadow: inset 1px 1px 0px 2px rgba(0,0,0,1);
}

<div class="parent"></div>

Answer 1

如果您希望所有侧面的边框宽度相等-只需移除gremlin> g.addV("Test").property("title", "Test node 1").property("a", "") {"requestId":"111xxxx-xxx-xxx-xxx-xxx","code":"MalformedQueryException","detailedMessage":"Query parsing failed at line 1, character position at 62, error message : no viable alternative at input 'g.addV(\"Test\").property(\"title\",\"Test node 1\").property(\"a\",\"\"'"} Type ':help' or ':h' for help. Display stack trace? [yN] gremlin> g.addV("Test").property("title", "Test node 1").property("a", " ") ==>v[98b22f0f-6be0-fb11-38cc-066bf7e17051] 和offset-x：

offset-y

.parent{
  background: #c9c9c9;
  padding:5rem;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,1);
}

Answer 2

将阴影的水平和垂直偏移（值）更改为0px，例如：

   box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,1);

.parent{
  background: #FFF;
  padding:5rem;
  box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,1);
}

<div class="parent"></div>

Answer 3

如果您无法使用border属性，可以使用以下不同技术为元素创建边框：

使用大纲

.parent{
  background: #FFF;
  padding:5rem;
  outline:2px solid rgba(0,0,0,1);
}

<div class="parent"></div>

使用Box-shadow

.parent{
  background: #FFF;
  padding:5rem;
  margin:5px;
  box-shadow:0 0 0 2px rgba(0,0,0,1);
}
.parent.inset {
  
  box-shadow:inset 0 0 0 2px rgba(0,0,0,1);
}

<div class="parent"></div>


<div class="parent inset"></div>

使用渐变

.parent{
  background: #FFF;
  padding:5rem;
  margin:5px;
  background:
   linear-gradient(#000,#000) top/100% 2px,
   linear-gradient(#000,#000) bottom/100% 2px,
   linear-gradient(#000,#000) left/2px 100%,
   linear-gradient(#000,#000) right/2px 100%; 
  background-repeat:no-repeat;
}

<div class="parent"></div>

如果要使用background-color，则可以使用渐变的另一种方法：

.parent{
  background: #FFF;
  padding:5rem;
  margin:5px;
  background:
   linear-gradient(pink,pink) center/calc(100% - 4px) calc(100% - 4px),
   linear-gradient(#000,#000); 
  background-repeat:no-repeat;
}

<div class="parent"></div>