Есть ли способ создать градиент границы 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

я предлагаю вам сделать это так: используя pseudo-element как :before, которые вам позиция на bottom:0 и left:-15px, потому что 15px ширина границы. если изменить border-width изменить left:-15px

такой же, за это width:15px

width:15px я использовал и background:#000, но вы могли бы просто использовать 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

Проверить это site, где вы можете создать CSS градиенты и получить код и вставьте в ваш CSS.