In CSS3, you can use the "linear-gradient" function to change the angle of the gradient. This function is used to create an image that represents a linear gradient of two or more colors. The first parameter is used to set the gradient. The angle or direction, the syntax is "color attribute: linear-gradient (gradient angle, color...)".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to change the angle of gradient in css3
linear-gradient The syntax of linear gradient is:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
The main parameters are:
direction Specifies the direction (or angle) of the gradient using an angle value.
color-stop1, color-stop2,... are used to specify the starting and ending colors of the gradient.
The example is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> #grad1 { height: 30px; background-color: red; /* 浏览器不支持的时候显示 */ background-image: linear-gradient(0deg, red, yellow); } #grad2 { height: 30px; background-color: red; /* 浏览器不支持的时候显示 */ background-image: linear-gradient(90deg, red, yellow); } #grad3 { height: 30px; background-color: red; /* 浏览器不支持的时候显示 */ background-image: linear-gradient(180deg, red, yellow); } #grad4 { height: 30px; background-color: red; /* 浏览器不支持的时候显示 */ background-image: linear-gradient(-90deg, red, yellow); } </style> </head> <body> <h3 id="线性渐变-nbsp-nbsp-使用不同的角度">线性渐变 - 使用不同的角度</h3> <div id="grad1" style="text-align:center;">0deg</div><br> <div id="grad2" style="text-align:center;">90deg</div><br> <div id="grad3" style="text-align:center;">180deg</div><br> <div id="grad4" style="text-align:center;">-90deg</div> <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p> </body> </html>
Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to change the angle of gradient in css3. For more information, please follow other related articles on the PHP Chinese website!

The article discusses HTML5 audio formats and cross-browser compatibility. It covers MP3, WAV, OGG, AAC, and WebM, and suggests using multiple sources and fallbacks for broader accessibility.

SVG and Canvas are HTML5 elements for web graphics. SVG, being vector-based, excels in scalability and interactivity, while Canvas, pixel-based, is better for performance-intensive applications like games.

HTML5 enables drag and drop with specific events and attributes, allowing customization but facing browser compatibility issues on older versions and mobile devices.

The article discusses the differences between HTML's <meter> and <progress> tags, used for displaying scalar values and task progress, respectively.

Here is the converted data into a tabular format using HTML5, including examples and strategies for responsive design, best practices for styling, and semantic HTML5 tags used within a table structure:<!DOCTYPE html> <html lang=&

The article discusses image maps in web design, their benefits like enhanced navigation and engagement, and tools for their creation.

The article discusses the differences between <datalist> and <select> tags, focusing on their functionality, user interaction, and suitability for different web development scenarios.

The article discusses the differences between HTML's <figure> and <img> tags, focusing on their purposes, usage, and semantic benefits. The main argument is that <figure> provides better structure and accessi


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 Linux new version
SublimeText3 Linux latest version

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

Dreamweaver CS6
Visual web development tools

Dreamweaver Mac version
Visual web development tools

WebStorm Mac version
Useful JavaScript development tools
