Why Does a Transparent Border on a Linear Gradient Cause Color Swapping and Flattening?

Transparency Over Gradient Background: Investigating a Strange Border Effect

When adding a transparent border to an element with a linear-gradient background, an unusual phenomenon arises. The colors along the left and right edges appear incorrect, as if they have been swapped. Additionally, these sections exhibit a flatten appearance.

HTML Fragment:

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

CSS Configuration:

.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);
}

Cause of the Effect:

This issue occurs because the gradient's start and end points are positioned at the padding-box's edges. However, the border is drawn outside the padding-box. Since the background repeats across the border-box on each side, the border appears peculiar.

Solution Using box-shadow:

To replicate the visual effect of a border without this issue, consider using a box-shadow:

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

As a box-shadow doesn't occupy space, it's essential to adjust the padding accordingly.

Diagram of Padding-Box and Border-Box:

[Image of padding-box and border-box]

Live Demo:

Explore the corrected behavior in this JSFiddle: http://jsfiddle.net/ilpo/fzndodgx/5/

The above is the detailed content of Why Does a Transparent Border on a Linear Gradient Cause Color Swapping and Flattening?. For more information, please follow other related articles on the PHP Chinese website!