影にパッディングを適用する

Question

ここでは、最初に2つのボタンがあり、シャドーには完全な影がありません。

そしてもう1つは、<hr>タグを付けて、パディング付きの影にします。

<hr>タグなしで、どのようにして2番目のボタンのような影にすることができますか？お時間を

.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

box-shadow仕様の4番目の数字である「スプレッド半径」を使用できます。負の場合、影が縮小されます。

.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>