どのように境界線をグラデーションで作成できますか？私は境界線を作成する必要が

Question

こんにちは、誰もが、これは私のCSSは、誰も私を助けてcode.Please picture.Heresでのように勾配を破線。

.Rectangle-5 { 
    margin: 51px 0px 0px 35px; 
    display: inline-block; 
    width: 370px; 
    height: 280px; 
    border-radius: 3px; 
    border: 1px dashed; 
    border-image-source: linear-gradient(to bottom, #4fc3f7, #ab5ca4 49%, #ff512f); 
    border-image-slice: 1; 
} 

Answer 1

あなたはのexternコンテナの背景として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）を使用しています。

境界の高さの値を変更する場合は、それに応じて高さも更新する必要があります。