[英]How can I create a dashed border with gradient?
新答案
這是初始答案的改進版本,代碼更少。 這個想法是依靠多個背景並調整每個background-clip
。
.container { display:inline-block; height: 200px; width: 200px; margin: 20px; border-radius:3px; border: 2px dotted #fff; background: linear-gradient(#fff 0 0) padding-box, linear-gradient(to bottom, #4fc3f7, #ab5ca4 49%, #ff512f) border-box; } .alt { border: 2px dashed #fff; }
<div class="container"> </div> <div class="container alt"> </div>
舊答案
您可以將linear-gradient
作為背景應用到外部容器,然后在內部容器上使用虛線或虛線邊框。 根據您的需要,您必須使用白色作為邊框顏色以及內容的背景,如下所示:
.container { display:inline-block; height: 200px; width: 200px; margin: 20px; background-image: linear-gradient(to bottom, #4fc3f7, #ab5ca4 49%, #ff512f); } .inner { border: 2px dotted #fff; height: calc(100% - 4px); } .inner-alt { border: 2px dashed #fff; height: calc(100% - 4px); } .content { background: #fff; height: 100%; }
<div class="container"> <div class="inner"> <div class="content"></div> </div> </div> <div class="container"> <div class="inner-alt"> <div class="content"></div> </div> </div>
您需要注意內部容器的高度。 它應該是 100% 但不要忘記計算中的邊框,這就是我使用calc(100% - 4px)
的原因(上邊框為 2px,下邊框為 2px)。
因此,如果您更改邊框高度值,您還需要相應地更新高度。
將以下規則添加到您的 CSS
.Rectangle-5{
border: 2px dotted #fff;
background: linear-gradient(#fff,#fff) padding-box,
linear-gradient(92.35deg, #3370fe 1.28%, #00e599 98.95%) border-box;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.