How to create a round cake and fill it with color in css

Method: 1. Add the "width: diameter value; height: diameter value" style to the element to create a square; 2. Add the "border-radius:50%" style to the element to set the square's rounded corners so that it becomes Make it a circle; 3. Add the "background: color value" style to the element and fill the circle with color.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to create a round cake in css and fill it with color

1. Let’s create a new html web page file and name it test .html, next we use the test.html file to explain how CSS3 achieves a circular pattern effect.

In the test.html file, use div tags. Add a style to the div tag and set the class attribute of the div tag to mybkkd.

Write the css style tag, and the mybkkd style will be written in the tag.

In the css tag, a circular pattern effect is achieved through the class attribute mybkkd of the div tag.

2. In the css style tag, within the brackets, the div of mybkkd sets the css attribute style to, and the width and height attributes are set to the same value to represent the diameter of the circle. The length, border-radius attribute is used to set the rounded corners. At 50%, the rounded corner graphic is exactly circular, and the background attribute is used to set the color of the circle.

width: 100px;
height: 100px;
background: red;
border-radius: 50%

Browse test.html in the browser to see if the effect can be achieved.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to create a round cake and fill it with color in css. For more information, please follow other related articles on the PHP Chinese website!