当前位置:网站首页>An article takes you to understand CSS gradient knowledge
An article takes you to understand CSS gradient knowledge
2020-11-06 20:42:45 【Python advanced】
CSS3 Gradients allow you to smoothly transition your background color between two or more colors .
earlier , You have to use images to achieve these effects . However , By using CSS3 Gradients can reduce download time and bandwidth usage . Besides , Scaled elements look better when zooming , Because gradients are generated by browsers .
One 、 Browser support
The number in the table specifies the first browser version that fully supports this property .( From Baidu )
After the number -webkit- perhaps -moz- You need to specify the prefix when you use it .
attribute | Chrome | Firefox | Safari | Opera | IE |
---|---|---|---|---|---|
linear-gradient | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
radial-gradient | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
repeating-linear-gradient | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
repeating-radial-gradient | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
Two 、CSS3 Linear gradient ( Down / Up / towards the left / towards the right / tilt )
To create a linear gradient , Must define at least two color stops . Color stop is the color you want to render between smooth transitions . You can also set a starting point and a direction ( Or the angle ) And gradient effects .
grammar :
background: linear-gradient(direction, color-stop1, color-stop2, ...);
HTML Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> project </title>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
for example :
Linear gradient - Up and down
Show a linear gradient from the top . It starts in red , Transition to yellow :
<style>
#grad1 {
height: 200px;
background: blue; /* For browsers that don't support gradients */
background: -webkit-linear-gradient(blue, yellow); /* Safari 5.1 To 6.0 */
background: -o-linear-gradient(blue, yellow); /* Opera 11.1 To 12.0 */
background: -moz-linear-gradient(blue, yellow); /* Firefox 3.6 To 15 */
background: linear-gradient(blue, yellow); /* Standard grammar ( Must be the last ) */
}
</style>
Linear gradient - Left to right
for example :
Show a linear gradient from left . It starts in red , Transition to yellow
<style>
#grad1 {
height: 200px;
background: blue; /* For browsers that don't support gradients */
background: -webkit-linear-gradient(left, blue , yellow); /* Safari 5.1 To 6.0 */
background: -o-linear-gradient(right, blue, yellow); /* Opera 11.1 To 12.0 */
background: -moz-linear-gradient(right, blue, yellow); /* Firefox 3.6 To 15 */
background: linear-gradient(to right, blue , yellow); /* Standard grammar ( Must be the last ) */
}
</style>
Linear gradient - Diagonals
Diagonal gradients can be achieved by specifying horizontal and vertical starting positions .
The following example shows a linear gradient starting from the upper left corner ( To the lower right corner ). It starts to be red , Transition to yellow :
<style>
#grad1 {
height: 200px;
background: blue; /* For browsers that don't support gradients */
background: -webkit-linear-gradient(left top, blue, yellow); /* Safari 5.1 To 6.0 */
background: -o-linear-gradient(bottom right, blue, yellow); /* Opera 11.1 To 12.0 */
background: -moz-linear-gradient(bottom right, blue, yellow); /* Firefox 3.6 To 15 */
background: linear-gradient(to bottom right, blue, yellow); /* Standard grammar ( Must be the last ) */
}
</style>
1. Use angle
If you want more control over the gradient direction , You can define an angle , Not the intended direction ( Next 、 On 、 Left 、 Wait right ).
grammar
background: linear-gradient(angle, color-stop1, color-stop2);
The following example shows how to use an angle on a linear gradient :
for example :
#grad {
width: 100%;
height: 100px;
background: blue; /* For browsers that don't support gradients */
background: -webkit-linear-gradient(-90deg, blue, yellow); /* Safari 5.1 To 6.0 */
background: -o-linear-gradient(-90deg, blue, yellow); /* Opera 11.1 To 12.0 */
background: -moz-linear-gradient(-90deg, blue, yellow); /* Firefox 3.6 To 15 */
background: linear-gradient(-90deg, blue, yellow); /* Standard grammar */
}
2. Use multiple stop colors
The following example shows a linear gradient with multiple stop colors ( From top to bottom )
for example :
#grad {
background: blue; /* For browsers that don't support gradients */
background: -webkit-linear-gradient(blue, yellow, green); /* Safari 5.1 To 6.0 */
background: -o-linear-gradient(blue, yellow, green); /* Opera 11.1 To 12.0 */
background: -moz-linear-gradient(blue, yellow, green); /* Firefox 3.6 To 15 */
background: linear-gradient(blue, yellow, green); /* Standard grammar */
}
The following example shows how to use rainbow colors and some text to create a linear gradient ( From left to right )
Gradient background
for example :
#grad {
background: blue; /* For browsers that don't support gradients */
/* Safari 5.1 To 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 To 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Fx 3.6 To 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient( To right, red,orange,yellow,green,blue,indigo,violet);
}
3. Transparency of use
CSS3 Gradients also support transparency , Can be used to create a fade in effect .
Add transparency , We use it rgba() Function to define the stop color . stay rgba() The last parameter of the function can be taken from 0 To 1 Value , And define the transparency of the color :0 Indicates full transparency ,1 The color is the complete representation of ( The opacity ).
The following example shows a linear gradient starting from the left . It's starting to be completely transparent , Transition to full red :
#grad {
background: blue; /* Browsers that don't support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}
4. Repeat linear gradient
repeating-linear-gradient()
Function to repeat a linear gradient :
for example :
#grad {
background: blue; /* Browsers that don't support gradients */
/* Safari 5.1 To 6.0 */
background: -webkit-repeating-linear-gradient(blue, yellow 10%, green 20%);
/* Opera 11.1 To 12.0 */
background: -o-repeating-linear-gradient(blue, yellow 10%, green 20%);
/* Firefox 3.6 To 15 */
background: -moz-repeating-linear-gradient(blue, yellow 10%, green 20%);
/* Standard syntax */
background: repeating-linear-gradient(blue, yellow 10%, green 20%);
}
3、 ... and 、CSS3 Radial Gradient ( Defined by the center )
The radial gradient is defined by its center .
To create a radial gradient , You must also define at least two stop colors .
grammar
background: radial-gradient(shape size at position, start-color, ..., last-color);
Radial Gradient - Evenly spaced stop color ( Default )
The following example shows a radial gradient , Its color is evenly spaced :
#grad {
background: blue; /* browsers that do not support gradients */
background: -webkit-radial-gradient(blue, yellow, green); /* Safari 5.1 To 6.0 */
background: -o-radial-gradient(blue, yellow, green); /* Opera 11.6 To 12.0 */
background: -moz-radial-gradient(blue, yellow, green); /* Firefox 3.6 To 15 */
background: radial-gradient(blue, yellow, green); /* Standard syntax */
}
Radial Gradient - Stop colors at different intervals
The following example shows a radial gradient with different spacing of color gradients :
#grad {
background: blue; /* Browsers that don't support gradients */
background: -webkit-radial-gradient(blue 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
background: -o-radial-gradient(blue 5%, yellow 15%, green 60%); /* Opera 11.6-12.0 */
background: -moz-radial-gradient(blue 5%, yellow 15%, green 60%); /* Firefox 3.6-15 */
background: radial-gradient(blue 5%, yellow 15%, green 60%); /* Standard syntax */
}
1. Set shape
The shape parameter defines the shape . It can take a circle or an ellipse . The default value is ellipse .
The following example shows a circular radial gradient :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> project </title>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(blue, yellow, green);
/* Safari 5.1 To 6.0 */
background: -o-radial-gradient(blue, yellow, green);
/* Opera 11.6 To 12.0 */
background: -moz-radial-gradient(blue, yellow, green);
/* Fx 3.6 To 15 */
background: radial-gradient(blue, yellow, green);
/* Standard grammar ( Must be the last ) */
}
#grad2 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(circle, blue, yellow, green);
/* Safari 5.1 To 6.0 */
background: -o-radial-gradient(circle, blue, yellow, green);
/* Opera 11.6 To 12.0 */
background: -moz-radial-gradient(circle, blue, yellow, green);
/* Fx 3.6 To 15 */
background: radial-gradient(circle, blue, yellow, green);
/* Standard grammar ( Must be the last ) */
}
</style>
</head>
<body>
<h3> Radial Gradient - shape </h3>
<p><strong> The ellipse ( This is the default ):</strong></p>
<div id="grad1"></div>
<p><strong> round :</strong></p>
<div id="grad2"></div>
<p><strong> Be careful :</strong> Internet Explorer 9 And earlier versions don't support gradients .</p>
</body>
</html>
2. Repeat radial gradient
repeating-radial-gradient() Function is used to repeat radial gradients :
for example :
#grad {
background: blue; /* Browsers that don't support gradients */
/* Safari 5.1 To 6.0 */
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
/* Opera 11.6 To 12.0 */
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
/* Firefox 3.6 To 15 */
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
/* Standard syntax */
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
Four 、 summary
This article is based on html Basics , Through to css The gradient effect is explained in detail , Two common gradients are introduced . Through rich cases, we can better understand , To experience the use of gradients , Hope to help you learn better .
Want to learn more Python Web crawler and data mining knowledge , Go to a professional website :http://pdcfighting.com/ Want to learn more Python Web crawler and data mining knowledge , Go to a professional website :http://pdcfighting.com/
版权声明
本文为[Python advanced]所创,转载请带上原文链接,感谢
边栏推荐
- C++ 数字、string和char*的转换
- C++学习——centos7上部署C++开发环境
- C++学习——一步步学会写Makefile
- C++学习——临时对象的产生与优化
- C++学习——对象的引用的用法
- C++编程经验(6):使用C++风格的类型转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
猜你喜欢
-
C + + programming experience (6): using C + + style type conversion
-
Latest party and government work report ppt - Park ppt
-
在线身份证号码提取生日工具
-
Online ID number extraction birthday tool
-
️野指针?悬空指针?️ 一文带你搞懂!
-
Field pointer? Dangling pointer? This article will help you understand!
-
HCNA Routing&Switching之GVRP
-
GVRP of hcna Routing & Switching
-
Seq2Seq实现闲聊机器人
-
【闲聊机器人】seq2seq模型的原理
随机推荐
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing&Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+#1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11:如何处理标定助手品质问题
- HALCON 20.11:标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- “十大科学技术问题”揭晓!|青年科学家50²论坛
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- 求反转链表
- Reverse linked list
- js的数据类型
- JS data type
- 记一次文件读写遇到的bug
- Remember the bug encountered in reading and writing a file
- 单例模式
- Singleton mode
- 在这个 N 多编程语言争霸的世界,C++ 究竟还有没有未来?
- In this world of N programming languages, is there a future for C + +?
- es6模板字符
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World