Home > Web Front-end > CSS Tutorial > 5 ways to implement a CSS circle (summary)

5 ways to implement a CSS circle (summary)

青灯夜游
Release: 2018-10-11 15:53:05
Original
4010 people have browsed it

This article mainly introduces 5 ways to implement CSS circles (summary). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I thought of being asked about the internship circle during my internship interview last year, so I decided to write an article to summarize it! In summary, there are about 5 methods.


1. Nesting of two tags:

<p class="element1">
    <p class="child1"></p>
</p>
Copy after login
.element1{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
        .child1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }
Copy after login

2. Use pseudo elements, before /after

<p class="element2"></p>
Copy after login
.element2{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
        .element2:after{
            content: "";
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }
Copy after login

3. Use border:

<p class="element3"></p>
Copy after login
 .element3{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            border: 50px solid lightpink ;
        }
Copy after login

4. Use border-shadow

<p class="element4"></p>
Copy after login
.element4{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink ;
            margin: auto;
        }
Copy after login
<p class="element5">
Copy after login
  .element5{
            width: 200px;
            height: 200px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink inset;
            margin: auto;
        }
Copy after login

5. Use radial-gradient

<p class="element6"></p>
Copy after login
.element6{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);
        }
Copy after login

If you have other methods, please tell me, thank you! ! !

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit CSS Video Tutorial!

Related recommendations:

php public welfare training video tutorial

CSS Online Manual

##div/css graphic tutorial

The above is the detailed content of 5 ways to implement a CSS circle (summary). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:csdn.net
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template