CSS Box наложение предыдущей тени - PullRequest
Новая
       22

CSS Box наложение предыдущей тени

0 голосов
/ 27 декабря 2018

В приведенном ниже примере для первого блока я дал тень от блока внешнему элементу Div, и это выглядит хорошо.Могу ли я получить подобный вид, давая тень внутренним элементам Div (во 2-й ячейке)?Это мне нужно, потому что, если я нажму на любой внутренний элемент Div, я хочу отделить этот элемент Div от остальных элементов Div, как показано в третьем окне.Спасибо 

.my-shadow {
  width:500px;
  height:400px;
  margin:auto;
  margin-top:50px;
  box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important
}

.my-inner-div {
  padding:20px;
}

.my-shadow2 {
  width:500px;
  height:400px;
  margin:auto;
  margin-top:50px;
 
}

.my-inner-div2 {
  padding:20px;
   box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important
}
        <div style="float:left;margin-left:30px; ">
    <h1> First  </h1>
    
    <div class="my-shadow ">
      
      <div class="my-inner-div">
        This is test1
      </div>
      
      <div class="my-inner-div">
        This is test2
      </div>
      <div class="my-inner-div">
        This is test3
      </div>
      <div class="my-inner-div">
        This is test4
      </div>
      <div class="my-inner-div">
        This is test5
      </div>
      
    </div>
      </div>
    
    <div style="float:left; margin-left:50px;">
      <h1> Second  </h1>
    <div class="my-shadow2 ">
      
      <div class="my-inner-div2">
        This is test1
      </div>
      
      <div class="my-inner-div2">
        This is test2
      </div>
      <div class="my-inner-div2">
        This is test3
      </div>
      <div class="my-inner-div2">
        This is test4
      </div>
      <div class="my-inner-div2">
        This is test5
      </div>
      
    </div>
      </div>
    
    <div style="float:left; margin-left:50px;">
      <h1> Thrid  </h1>
    <div class="my-shadow2 ">
      
      <div class="my-inner-div2">
        This is test1
      </div>
      
      <div class="my-inner-div2" style="margin:20px">
        This is test2
      </div>
      <div class="my-inner-div2">
        This is test3
      </div>
      <div class="my-inner-div2">
        This is test4
      </div>
      <div class="my-inner-div2">
        This is test5
      </div>
      
    </div>
      </div>

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Вы можете использовать тень на псевдоэлементе, который вы поместите под div, и у вас не возникнет никаких проблем: 

.my-inner-div {
  padding: 20px;
}

.my-shadow2 {
  width: 500px;
  margin: auto;
  margin-top: 50px;
  position:relative;
  z-index:0; /*to avoid side effect of stacking context, we make sure everything belong inside this div*/
}

.my-inner-div2 {
  padding: 20px;
  position:relative;
  background:#fff;
  transition:1s all;
}
.my-inner-div2:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  box-shadow: 
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

.my-inner-div2:hover {
  margin:20px;
}
<div class="my-shadow2 ">

    <div class="my-inner-div2">
      This is test1
    </div>

    <div class="my-inner-div2">
      This is test2
    </div>
    <div class="my-inner-div2">
      This is test3
    </div>
    <div class="my-inner-div2">
      This is test4
    </div>
    <div class="my-inner-div2">
      This is test5
    </div>

  </div>
0 голосов
/ 27 декабря 2018

Div прозрачны, поэтому они показывают всю тень от них.Я добавил белый фон во фрагмент ниже:

Вы все еще можете увидеть небольшую тень наверху, это потому, что каждый последующий div накладывает div перед ним.Я бы порекомендовал использовать более светлую рамку-тень или переместить ее на несколько пикселей вниз, чтобы она была менее заметна, а затем переместить ее для выбранного элемента div как часть стиля выделения. 

.my-shadow {
  width:500px;
  height:400px;
  margin:auto;
  margin-top:50px;
  box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important
}

.my-inner-div {
  padding:20px;
}

.my-shadow2 {
  width:500px;
  height:400px;
  margin:auto;
  margin-top:50px;
 
}

.my-inner-div2 {
  padding:20px;
   box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important;
   background: #fff;
}
        <div style="float:left;margin-left:30px; ">
    <h1> First  </h1>
    
    <div class="my-shadow ">
      
      <div class="my-inner-div">
        This is test1
      </div>
      
      <div class="my-inner-div">
        This is test2
      </div>
      <div class="my-inner-div">
        This is test3
      </div>
      <div class="my-inner-div">
        This is test4
      </div>
      <div class="my-inner-div">
        This is test5
      </div>
      
    </div>
      </div>
    
    <div style="float:left; margin-left:50px;">
      <h1> Second  </h1>
    <div class="my-shadow2 ">
      
      <div class="my-inner-div2">
        This is test1
      </div>
      
      <div class="my-inner-div2">
        This is test2
      </div>
      <div class="my-inner-div2">
        This is test3
      </div>
      <div class="my-inner-div2">
        This is test4
      </div>
      <div class="my-inner-div2">
        This is test5
      </div>
      
    </div>
      </div>
    
    <div style="float:left; margin-left:50px;">
      <h1> Thrid  </h1>
    <div class="my-shadow2 ">
      
      <div class="my-inner-div2">
        This is test1
      </div>
      
      <div class="my-inner-div2" style="margin:20px">
        This is test2
      </div>
      <div class="my-inner-div2">
        This is test3
      </div>
      <div class="my-inner-div2">
        This is test4
      </div>
      <div class="my-inner-div2">
        This is test5
      </div>
      
    </div>
      </div>
...