CSS3 & gradient & color & background
css background
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients
Gradient Background
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
Linear Gradients
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Diagonal 对角线
background-image: linear-gradient(angle, color-stop1, color-stop2);
rainbow
.rainbow {
height: 55px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
/* Standard syntax (must be last) */
}
Radial Gradients
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
size keywords
- closest-side
- farthest-side
- closest-corner
- farthest-corner
https://www.w3schools.com/css/css3_gradients.asp
css gradient generator
https://mycolor.space/gradient
gradient text & gradient background
-webkit-text-fill-color & -webkit-gradient
https://wesbos.com/sanitize-html-es6-template-strings/
.post .entry-title {
font-size: 50px;
font-weight: 500;
margin: 20px 0;
border-top: 2px solid #ecd018;
border-bottom: 2px solid #ecd018;
line-height: 1.4;
padding: 20px 0;
background-image: -webkit-gradient(linear,0% 0%,25% 100%,from(#ff2c2c),to(#7a5e91));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
demo
https://www.cnblogs.com/xgqfrms/p/10898414.html
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!