Arka plan olarak linear-gradient bir öğe üzerinde şeffaf bir sınır uygularken, garip bir etkisi olsun.

SoL Haber ve eleman sağ tarafında uygun renkler (yolu açık mı) var ve tuhaf bir şekildedüz.

HTML

<div class="colors">
</div>

CSS

.colors {
    width: 100px;
    border: 10px solid rgba(0,0,0,0.2);
    height: 50px;
    background: linear-gradient(to right, 
        #78C5D6,
        #459BA8,
        #79C267,
        #C5D647,
        #F5D63D,
        #F08B33,
        #E868A2,
        #BE61A5);
}

Nedenbu elemanın sol ve sağ tarafında garip bir etki gösteren veNebu konuda ne yapabilirim?

Burada keman: http://jsfiddle.net/fzndodgx/3/

gradient başlangıç ve bitiş noktaları padding-box kenarlarında ve border padding-box dışarıda işlenir. Yani, sınırları background padding-box dışında her tarafta border-box kapağı tekrar çünkü komik görünüyor.

box-shadow:inset işlenmiş iç padding-box (gibi arka plan) ve verir görsel olarak aynı etkiye bir border, bu yüzden şansını deneyebilirsin kullanarak bu yer border:

box-shadow: inset 0 0 0 10px rgba(0,0,0,0.2);
padding: 10px;

box-shadow herhangi bir yer almaz, çünkü, doldurma buna göre artırmak gerekir.

padding-box border-boxillüstrasyon:

http://jsfiddle.net/ilpo/fzndodgx/5/ Demo