2016-12-13 3 views
-5

Я попытался покрыть тень вокруг всех блоков одинаково с помощью CSS. Мне не повезло, потому что по какой-то причине одна строка (средняя) не выравнивалась в правильном размере по сравнению с другими строками. Как видите, он толще. Я пробую 2 дня, чтобы найти решение, пока не повезло.Коробка тень, не покрывающая все вокруг так же

.shadow1{ 
 
\t box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4); 
 
    \t \t width:250px; 
 
\t \t \t height:200px; 
 
\t \t \t background-color: rgba(0,0,0, .2); 
 
\t \t \t position:relative; 
 
} 
 
.shadow2{ 
 
\t box-shadow: inset -5px 0px 0px 5px rgba(255, 255, 255, 0.4); 
 
    \t \t width:250px; 
 
\t \t \t height:200px; 
 
\t \t \t background-color: rgba(0,0,0, .2); 
 
\t \t \t position:relative; 
 
} 
 
.shadow3{ 
 
\t box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4); 
 
    \t \t width:250px; 
 
\t \t \t height:200px; 
 
\t \t \t background-color: rgba(0,0,0, .2); 
 
\t \t \t position:relative; 
 
} 
 
.shadow4{ 
 
\t box-shadow: inset -5px 0px 0px 5px rgba(255, 255, 255, 0.4); 
 
    \t \t width:250px; 
 
\t \t \t height:200px; 
 
\t \t \t background-color: rgba(0,0,0, .2); 
 
\t \t \t position:relative; 
 
}
<div class="shadow1"> </div> 
 
<div class="shadow2"> </div> 
 
<div class="shadow3"> </div> 
 
<div class="shadow4"> </div>

+0

Перейди читать [просить]. – CBroe

+2

Какие «линии» вы говорите? Тень выглядит одинаково вокруг каждого края. – Turnip

+0

, пожалуйста, скажите мне, в чем ваша проблема в теневой коробке. какая строка окна появится в толщину – bala

ответ

0

Я не очень хорошо знаю, что вы хотите точно, но я думаю ... это то, что вы хотите?

.shadow1{ 
 
\t box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255, 0.4); 
 
    \t width:250px; 
 
\t height:200px; 
 
\t background-color: rgba(0,0,0, .2); 
 
\t position:relative; 
 
} 
 
.shadow2{ 
 
\t box-shadow: inset -5px 0px 0px 5px #ddd; 
 
    \t width:250px; 
 
\t height:200px; 
 
\t background-color: rgba(0,0,0, .2); 
 
\t position:relative; 
 
    margin-top:-5px; 
 
} 
 
.shadow3{ 
 
\t box-shadow: inset 0px 0px 0px 5px #ddd; 
 
    \t width:250px; 
 
\t height:200px; 
 
\t background-color: rgba(0,0,0, .2); 
 
    position:relative; 
 
    margin-top:-5px; 
 
} 
 
.shadow4{ 
 
\t box-shadow: inset -5px 0px 0px 5px #ddd; 
 
    \t width:250px; 
 
\t height:200px; 
 
\t background-color: rgba(0,0,0, .2); 
 
\t position:relative; 
 
    margin-top:-5px; 
 
}
<div class="shadow1"></div> 
 
<div class="shadow2"></div> 
 
<div class="shadow3"></div> 
 
<div class="shadow4"></div>

Смежные вопросы