Apply padding in shadow

Question

Здесь у меня есть две кнопки, у которых есть полная тень, нет тени в тени.

И во втором я положил один тег <hr>, чтобы сделать тень с отступом.

Как сделать тень как вторую кнопку без знака <hr>.

.boxed { 
 
    box-shadow: 0 2px 5px #000; 
 
} 
 
.round-corner { 
 
    border-radius: 28px !important; 
 
} 
 
.padding-20{ 
 
    padding: 0 20px !important; 
 
} 
 
.fixed-in-top{ 
 
    margin-top: -1px !important; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css"> 
 
<div class="col-sm-12 form-group"> 
 
    <div class="col-sm-4"> 
 
    <input type="button" class="btn btn-primary round-corner col-sm-12 boxed" value="Submit and Print"> 
 
    </div> 
 
</div> 
 

 
<div class="col-sm-12"> 
 
    <div class="col-sm-4"> 
 
    <input type="button" class="btn btn-primary round-corner col-sm-12" value="Submit and Print"> 
 
    <div class="col-sm-12 padding-20"><hr class="boxed fixed-in-top" /></div> 
 
    </div> 
 
    
 
</div>

Спасибо за ваше время.

Answer 1

Вы можете использовать «радиус распространения», 4-й номер в спецификации box-shadow, который, когда отрицательный, сжимает тень.

.boxed { 
 
    box-shadow: 0 20px 5px -15px rgba(0, 0, 0, 0.3); 
 
} 
 
.round-corner { 
 
    border-radius: 28px !important; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css"> 
 
<div class="col-sm-12 form-group"> 
 
    <div class="col-sm-4"> 
 
    <input type="button" class="btn btn-primary round-corner col-sm-12 boxed" value="Submit and Print"> 
 
    </div> 
 
</div>

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

Answer 2

Вы можете попробовать pseudo элемент.

.boxed { 
 
    position: relative; 
 
    margin: 40px; 
 
} 
 
.round-corner { 
 
    border-radius: 28px !important; 
 
} 
 
.padding-20{ 
 
    padding: 0 20px !important; 
 
} 
 
button.boxed:after { 
 
    content: ''; 
 
    width: calc(100% - 30px); 
 
    display: block; 
 
    position: absolute; 
 
    box-shadow: 1px 2px 2px red; 
 
    height: 1px; 
 
    left: 15px; 
 
    top: 100%; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css"> 
 
<div class="col-sm-12 form-group"> 
 
    <div class="col-sm-4"> 
 
    <button type="button" class="btn btn-primary round-corner col-sm-12 boxed">Submit</button> 
 
    </div> 
 
</div>