在陰影中應用填充

這裏我首先有兩個按鈕，一個是全影，沒有影子填充。在陰影中應用填充

而在第二個，我把一個<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>

感謝您的時間。

來源

2017-01-13 C2486

哎呦！謝謝。 – Chris

您是否可以使用''元素而不是''？ – Jayx

是的，我可以使用 – C2486

您可以使用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>

我留下作爲一個練習你的價值觀發揮完全匹配你的其他的影子，但這是要走的路。

來源

2017-01-13 12:31:21 Kroltan

wooooo ...這是第四個變量，謝謝 – C2486

@Rishi它wasn不會出現在你原來的例子中，但你可以看到如何在我的答案鏈接中使用它。 – Kroltan

您可以嘗試使用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>

來源

2017-01-13 12:34:01

感謝您分享您的答案，它也在工作 – C2486

酷，僞可調整更多可配置的陰影！ – Kroltan

在陰影中應用填充

回答

相關問題