Как изменить цвет обертки с фоном ограничивающего элемента, цвет рамки - PullRequest
Новая
       0

Как изменить цвет обертки с фоном ограничивающего элемента, цвет рамки

0 голосов
/ 15 марта 2020

У меня есть такой код. 

* {
  margin: 0;
}

.wrapper {
  width: 300px;
  height: 300px;
  border: 3px solid red;
  display: flex;
  flex-wrap: wrap;
}

.wrapper>div {
  min-width: calc(300px/3);
}

.child1 {
  background: blue;
}

div.child2 {
  background: green;
  min-width: calc(300px - 300px/3);
}

div.child3 {
  background: yellow;
  min-width: calc(300px - 300px/2);
}

div.child4 {
  background: purple;
  border: 4px gold dashed;
  box-sizing: border-box;
  min-width: calc(300px - 300px/2);
}
<div class="wrapper">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
  <div class="child3">
  </div>
  <div class="child4">
  </div>
</div>

Я хочу переопределить границу гибкого контейнера дочернего элемента гибкой границы и цвет фона, граничащий с гибким контейнером.

Кроме того, когда для этой границы используется пунктирная линия, такая как da sh, я хочу показать границу гибкого контейнера прозрачной ниже пунктирной линии.

What I want to achieve image

Я думал, что единственным способом сделать это было отрицательное поле, но это не сработало. 

* {
  margin: 0;
}

.wrapper {
  width: 300px;
  height: 300px;
  border: 3px solid red;
  display: flex;
  flex-wrap: wrap;
}

.wrapper>div {
  min-width: calc(300px/3);
}

.child1 {
  background: blue;
    margin-left: -3px;
  margin-top: -3px;
}

div.child2 {
  background: green;
  min-width: calc(300px - 300px/3);
}

div.child3 {
  background: yellow;
  min-width: calc(300px - 300px/2);
}

div.child4 {
  background: purple;
  border: 4px gold dashed;
  box-sizing: border-box;
  min-width: calc(300px - 300px/2);
  margin-right: -3px;
  margin-bottom: -3px;
}
<div class="wrapper">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
  <div class="child3">
  </div>
  <div class="child4">
  </div>
</div>

Как мне этого добиться?

1 Ответ

0 голосов
/ 15 марта 2020

Этот код может помочь вам решить вашу проблему. Вы можете играть со свойством z-index. 

* {
  margin: 0;
}

.wrapper {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
  position:relative;
}
.wrapper:after {
  content:"";
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  border:4px solid red;
  box-sizing:border-box;
  z-index:4;
}

.wrapper>div {
}

.child1 {
  background: blue;
  grid-column: span 1;
  grid-row: span 2;
  position:relative;
  z-index:1;
}

div.child2 {
  background: green;
  grid-column: span 3;
  grid-row: span 2;
  position:relative;
  z-index:2;
}

div.child3 {
  background: yellow;
  grid-column: span 2;
  grid-row: span 2;
  position:relative;
  z-index:3;
}

div.child4 {
  background: purple;
  border: 4px gold dashed;
  grid-column: span 2;
  grid-row: span 2;
  position:relative;
  z-index:5;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
 <div class="wrapper">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
  <div class="child3">
  </div>
  <div class="child4">
  </div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...