search

sunmingtao / sample-code

3 stars 4 forks source link

Understand the effect of linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, orangered 10%) #122

Closed sunmingtao closed 4 years ago

sunmingtao commented 4 years ago

Html

<div class="book"></div>

css

.book {
    linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, orangered 10%)
}

Effect image

sunmingtao commented 4 years ago

The first param 105deg dictates the orientation.

Change to 90deg, it becomes

image

sunmingtao commented 4 years ago

2nd param rgba(255, 255, 255, 0.9) 0% says at 0% (left most side), the color is white.

3rd param rgba(255, 255, 255, 0.9) 50% says at 50% (middle), the color is white.

4th param orangered 50% says at 50% (middle), the color is orange red.

Then at 100% (right most), it's also the color of the last param (4th one)

Since both 2nd and 3rd are at 50%, no gradient is happening. However, if we change the 3rd param to orangered 75% . Gradient happens from 50% to 75%.

image