Question

我尝试过很少但有没有办法在div的右侧创建一个轮廓？像下图中的紫色线一样 https://unsee.cc/geduzopi/

Answer 1

使用绝对位于父级右侧的伪元素，然后使用translateX()将其推送到父级之外。

＆＃13;

div {
  display: inline-block;
  width: 5em;
  background: orange;
  text-align: center;
  position: relative;
}

div:after {
  content: '';
  width: .5em;
  background: purple;
  position: absolute;
  right: 0; top: 0; bottom: 0;
  transform: translateX(200%);

＆＃13;

<div>1</div>

＆＃13;

Answer 2

您可以使用border-right。例如

    border-right: aqua 2pt solid;

请参阅 https://www.w3schools.com/cssref/pr_border-right.asp

Answer 3

如果您要在一侧创建一个outline，而不是不要创建一个border，则可以像我在我的操作中那样对inset使用盒形阴影下面的codepen示例。如果您有边界半径，我的示例很好看。

https://codepen.io/drewkiimon/pen/qeWQVx

div {
  background: pink;
  height: 250px;
  width: 250px;
  box-shadow: inset 0 1px black;
}

<div>
  
</div>

仅向div的一侧勾勒出轮廓

3 个答案: