2015-05-18 6 views
0

Мне нужна помощь с добавлением градиента в контур. Я не могу увеличить высоту, потому что позиционирование не будет работать правильно. Там в любом случае? Я попытался объединить этот код с градиентным классом, но градиент работал только для этой высоты 1px. Какие-либо предложения?Контур градиента - css

height: 1px !important; 
    background: #D3D3D3;  
    position: absolute; 
    right: 0px; 
    width: 50%; 
    top: 50%; 
    outline: 3px solid #D3D3D3; 

Спасибо, Jan

http://jsfiddle.net/he703uzv/

+0

Нам нужно больше кода и jsfiddle – Andrew

+0

Нужно ли это «контур», а не «граница»? Если нет, вы должны изучить использование '' border-image' '(https://developer.mozilla.org/en-US/docs/Web/CSS/border-image). – Shaggy

+0

Вы также можете проверить http://jsfiddle.net/necolas/vqnk9/ –

ответ

1

.outline-border { 
 
    width: 400px; 
 
    padding: 20px; 
 
    border-top: 10px solid #47c465; 
 
    border-bottom:10px solid #00deff; 
 
    background-image: 
 
     linear-gradient(#47c465, #00deff), 
 
     linear-gradient(#47c465, #00deff) 
 
    ; 
 
    background-size:10px 100%; 
 
    background-position:0 0, 100% 0; 
 
    background-repeat:no-repeat; 
 
}
<div class="outline-border">Hello World!</div>

См Outline градиент.

+0

Мне нужно использовать контур:; , попытался с границей, но другие вещи, такие как отзывчивое, положение и т. д. – JMusic

Смежные вопросы