2017-12-01 71 views
5

Bu kutuyu, iki ton düz renk olarak oluşturulan doğrusal bir degrade arka plana sahip ediyorum. Bir renk 44px'dir - gerisinde olduğu gibi başka bir renk daha vardır:İki tonlu düz renk olarak kenarlık resmi doğrusal degrade

background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0); 

Harika çalışıyor. Şimdi, kenarlıktaki renklerin arka planın rengini takip etmesini sağlamak için, sınır görüntü doğrusal geçişlerini kullanarak bu öğenin üstüne ve altına iki tonlu bir kenarlık eklemek istiyorum. Hile, doğrusal gradyanları düz renkler olarak kullanmaktır.

Böyle bir şey denedim:

border-image: linear-gradient(right, #365aa5 44px, #000 0); 
border-style: solid; 
border-width: 2px 0 2px 0; 

Ama obviousley, işe yaramıyor.

Bu işi nasıl yapabileceğine dair herhangi bir fikrin var mı?

JsFiddle here.

+1

Olası yinelenen [Bir arka plan resmini ve CSS3 gradyanını aynı öğe üzerinde nasıl birleştirebilirim?] (Https: //stackoverflow.c om/questions/2504071/nasıl yapılır-nasıl-bir-arka plan-resim-ve-css3-degrade-on-aynı-öğe) – stdunbar

cevap

4

border-image özelliğinin sonuna number eklemeniz gerekir. Senin durumunda hiçbir etkisi yok ama yine de gerekli. Ayrıca görmek kolaydır bu yüzden mavi renk aldı to right yerine

div { 
 
    height: 50px; 
 
    width: 80%; 
 
    padding: 4px; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0); 
 
    /* What I'm trying: */ 
 
    border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0) 1; 
 
    border-style: solid; 
 
    border-width: 2px 0 2px 0; 
 
} 
 

 

 
body { 
 
    padding: 20px; 
 
    background-color: #fff; 
 
}
<div>Two tone solid color top and bottom border to<br> match the two tone background</div>

right kullanımı.

DÜZENLEME: Ayrıca mümkün vibhu olarak öne:

border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0); 
border-image-slice: 1; 
+0

Başar, çok teşekkürler. – Meek

+0

kenarlık görüntü değerinden sonra 1'i çıkartabilir ve aynı efekti elde etmek için "border-image-slice": "1" ekleyebilirsiniz. – Vibhu

1

Sen ek kod ::

div::after { 
content: ""; 
position: absolute; 
height: 2px; 
width: 44px; 
right: 0; 
background: #365aa5; 
top: -2px; 
} 


div::before { 
content: ""; 
position: absolute; 
height: 2px; 
width: 44px; 
right: 0; 
background: #365aa5; 
bottom: -2px;} 

Jsfiddle Buraya eklenen aşağıda kullanarak iki ton sınırını ekleyebilirsiniz: https://jsfiddle.net/y2Ln2h86/

İlgili konular