Border shifting linear-gradient background
ghivert
I have a div with a background defined as linear-gradient, and an almost transparent border on top of it. It should paint correctly, but the rendering is broken.
Here is the associated CodePen.
body {
background: black;
}
.gradient-background {
background: linear-gradient(270deg, #681c2e 0%, #232a6c 49.48%);
height: 80px;
border: solid 20px rgba(248, 251, 255, 0.1);
}<div class="gradient-background"></div>Do you know how to fix this with CSS? It behaves consistently on Chrome and Firefox. Is it an expected behavior in the spec of CSS and HTML?
Bagetsu
rgba(248, 251, 255, 0.1); is what causes the issue.
Use background-origin: border-box; and it will work fine.
body {
background: black;
}
.gradient-background {
background: linear-gradient(270deg, #681c2e 0%, #232a6c 49.48%);
height: 80px;
border: solid 20px rgba(248, 251, 255, 0.1);
background-origin: border-box;
}<html>
<body>
<div class="gradient-background"></div>
</body>
</html>For more information about this, check this source.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
TOP Ranking
- 1
Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)
- 2
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 3
pump.io port in URL
- 4
How to import an asset in swift using Bundle.main.path() in a react-native native module
- 5
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 6
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 7
Emulator wrong screen resolution in Android Studio 1.3
- 8
3D Touch Peek Swipe Like Mail
- 9
Double spacing in rmarkdown pdf
- 10
Svchost high CPU from Microsoft.BingWeather app errors
- 11
How to how increase/decrease compared to adjacent cell
- 12
Using Response.Redirect with Friendly URLS in ASP.NET
- 13
java.lang.NullPointerException: Cannot read the array length because "<local3>" is null
- 14
BigQuery - concatenate ignoring NULL
- 15
How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?
- 16
ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3
- 17
Can a 32-bit antivirus program protect you from 64-bit threats
- 18
Make a B+ Tree concurrent thread safe
- 19
Bootstrap 5 Static Modal Still Closes when I Click Outside
- 20
Vector input in shiny R and then use it
- 21
Assembly definition can't resolve namespaces from external packages
Comments