Home>Article>Web Front-end> How CSS implements various shapes

How CSS implements various shapes

coldplay.xixi
coldplay.xixi Original
2021-04-16 16:09:45 3527browse

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.

How CSS implements various shapes

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How to hide css elements Next article:How to hide css elements