Shulou(Shulou.com)06/02 Report--

This article mainly introduces the Dreamweaver CSS how to make radial circular gradient, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Dreamweaver design web page is very simple, today we will look at the use of CSS to draw a circular radial gradient method, can be achieved through [radial-gradient].

The first kind: basic simple gradient

1. Let's first set up a web page, write tags, and introduce CSS style.

2. Define the width and height of the IDV, and then use the background gradient to achieve the gradient [width: 400px; height: 400px background: radial-gradient (yellow, red);].

The second kind: simple circular gradient

It can also be done with the following code, almost the same as the first one.

[width: 400px; height: 400px [background: radial-gradient (circle, yellow, red);]

Third: specify the starting position of the circular gradient

1. It can be realized by the following code.

[width: 400px; height: 400px [background: radial-gradient (circle at 50px 50px, yellow, red);]

2. Specifying the starting position can also use a percentage to achieve the starting position.

[width: 400px; height: 400px; background: radial-gradient (circle at 12.5% 25%, yellow, red);]

Fourth: specify the location of the termination point

[width: 400px; height: 400px; background: radial-gradient (closest-side circle at 50px 50px, yellow, red);]

Fifth: specify gradient color breakpoints

1. In order to facilitate the observation of experienced friends, a border is added to see the effect.

[width: 400px; height: 400px; border: 1px solid silver; background: radial-gradient (closest-side circle, yellow, orange, red, white);]

Thank you for reading this article carefully. I hope the article "how to make Radial Circular gradient in CSS in Dreamweaver" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.