特定のピクセルにcss3境界勾配を作成する方法はありますか？

Question

これは背景グラデーションでは可能ですが、これを境界グラデーションに実装する方法を理解することはできません。ここで

は、私がこれまで

-webkit-border-image : -webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#000)) 1 100%; 
-webkit-border-image : -webkit-linear-gradient(#666, #000) 1 100%; 
-moz-border-image  : -moz-linear-gradient(#666, #000) 1 100%; 
-o-border-image  : -o-linear-gradient(#666, #000) 1 100%; 
border-image   : linear-gradient(to bottom, #666, #000) 1 100%; 

持っているものだ私は黒にボトムアップからの最初の32PXを希望して、残りは（＃666）上向きに灰色行きます。

Answer 1

私はあなたがそうのようにそれを行うお勧め： は15pxは、境界線の幅ですので、あなたが、bottom:0とleft:-15px位置:beforeようpseudo-elementを使用。あなたがborder-widthを変更した場合、それは私がwidth:15pxとbackground:#000使用width:15px

をだために、あなたはleft:-15px

同じに変更がありますが、単に代わりにこれら二つのborder-left:15px solid #000を使用することができます。結果は同じです。

.borderme { 
 
    position:relative; 
 
    height:300px; 
 
    border-left:15px solid #666; 
 

 
} 
 
.borderme:before { 
 
    position:absolute; 
 
    height:32px; 
 
    width:15px; 
 
    background:#000; 
 
    bottom:0; 
 
    left:-15px; 
 

 
    content:""; 
 
}

<div class="borderme"> 
 

 
</div>

Answer 2

あなたはCSSのグラデーションを作成し、あなたのコードを取得し、あなたのCSSに貼り付けることができ、このsiteをチェックしてください。