reactjs 我如何减少背景宽度和减少div宽度

rslzwgfq 于 2023-01-25 发布在 React

关注(0)|答案(2)|浏览(100)

所以，我想保持相同大小的框和相同的边框，但是我不想给整个背景上色。我只想给它中心的几个像素上色，在框的中间画一条红线。我可以通过创建另一个div元素来实现，但是我想用一个元素来完成这两件事。有可能吗？

background-color: red;
  position: absolute;
  margin: 120px 30px 0px 30px;

  height: 140px;
  width: 400px;
  border: 0.2rem rgba(172, 255, 47, 0.565) solid;

这是它现在的样子，我想保持相同的框大小，而不是红色的孔框，我只想在中心有一条线，可以吗？

reactjs

来源：https://stackoverflow.com/questions/72194360/how-can-i-reduce-background-width-and-reducing-the-div-width

2条答案

按热度按时间

qlvxas9a1#

我使用CSS伪元素插入红色的方框，然后使用css transform将方框定位在中间，这个解决方案是否符合您的要求？

.container {
  position: absolute;
  margin: 120px 30px 0px 30px;
  height: 140px;
  width: 400px;
  border: 0.2rem rgba(172, 255, 47, 0.565) solid;
}

.container::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  transform: translate(200px, 70px);
  background-color: red;
}

<div class="container"></div>

赞(0）回复(0）举报 2023-01-25

46scxncf2#

你想在一个绝对定位的框中间画一条红线，而不需要额外的html，你可以使用背景图片（线性渐变）。

.box {
border: 0.2rem rgba(172, 255, 47, 0.565) solid;
height: 140px;
/*margin: 120px 30px 0px 30px; this isn't necessary for the demo*/
position: absolute;
width: 400px;

background-image: linear-gradient(red, red);
background-repeat: no-repeat;
background-position-y: center;
background-size: 100% 5px;
}

<div class="box"></div>

赞(0）回复(0）举报 2023-01-25

我来回答

reactjs 我如何减少背景宽度和减少div宽度

2条答案

相关问题

热门标签

最新问答