How CSS implements various shapes

How to implement various shapes with CSS: 1. For a circle, set the width and height to be equal when setting CSS, and then set the [border-radius] attribute to half the width or height; 2. A square is a CSS graphic One of the simplest graphics in , also uses a div and sets an ID.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to achieve various shapes with CSS:

1. Circle

To use CSS to make a circle , we need a div with an ID set to it.

When setting the CSS for a circle, set the width and height to be equal, and then set the border-radius attribute to half the width or height:

#circle { width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; }

2. Square

The square is one of the simplest graphics among CSS graphics. It also uses a div and sets an ID.

The CSS style of the square only needs to be set to the same width and height.

#square { width: 120px; height: 120px; background: #f447ff; }

Recommended related tutorials:CSS video tutorial

The above is the detailed content of How CSS implements various shapes. For more information, please follow other related articles on the PHP Chinese website!