CSS bit 3-5 ways to implement the ring

Using CSS to implement the ring, the simplest way is to use nested tags, set Border-radius can be implemented, but this is the simplest way, this article we introduce 5 ways to implement the ring.

1. Two tag nesting

HTML code:

<class= "element1">    <class  = "Child1">1</div></Div  >

CSS code:

. Element1{width:200px;Height:200px;Background-color:#40ff2e;Border-radius:50%; }. Child1{width:100px;Height:100px;Border-radius:50%;Background-color:#009966;position:relative;Top:50px; Left:50px; }

Page effect:

Two div nesting, external div size is twice times the internal Div, set Border-radius to 50%, while the internal div set position to relative, relative to its own offset, down to the height of its own half, offset to the right half of its height.

2. Using pseudo-element befor,after

HTML code:

<class= "Element2"></div>

CSS code:

. Element2{width:200px;Height:200px;Background-color:#40ff2e;Border-radius:50%; }. Element2:after{content:"2";Display:Block;width:100px;Height:100px;Border-radius:50%;Background-color:#009966;position:relative;Top:50px; Left:50px; }

Page effect:

This is similar to method one, where the set element is followed by a pseudo-element, and the width and height are half of the preceding element, the same setting position to relative, the right offset to half the width of itself, and the downward offset to half the height.

3. Using border

HTML code:

<class= "Element3">3</div>

CSS code:

        {            width: 100px;             height: 100px;             background-color: #009966;             Border-radius: 50%;             Border: 50px solid #40ff2e;        }

Page effect:

The idea of this approach is simpler, which is to set the width of a wide border,border to half the width of the element, so that it looks like a ring.

4. Using Border-shadow

HTML code:

<class= "Element4">4</div>

CSS code:

        . element4{            width: 100px;             Height: 100px;             background-color: #009966;             Border-radius: 50%;             box-shadow:;             margin: auto;        }

Page effect:

This way of thinking is also relatively simple, as long as you know Box-shadow this CSS property can be, here set the shadow size of the element is the size of its own half. As follows:

H-shadow: Horizontal shadow position, allowable negative value, must.
V-shadow: Vertical shadow position, allowable negative value, must.
Blur: Blur distance, optional.
Spread: The size of the shadow, optional.
Color: The colour of the shadow, optional.
Inset: Changes the outer shadow to an inner shadow, optional.

5. Using Radial-gradient

HTML code:

<class= "element5">5</div>

CSS code:

        {            width: 200px;             height: 200px;             Border-radius: 50%;             background: -webkit-radial-gradient (Circle Closest-side, #009966 50%, #40ff2e 50%);        }

Page effect:

The use of the warp gradient is used here, as well as to figure out radial-gradient this CSS property:

Shape: Determines the type of garden, ellipse: Specifies the warp gradient of the ellipse, circle: Specifies the warp gradient of the prototype.
Size: Defines the scale of the gradient, the possible values:
Farthest-corner (default): Specifies the radius length of the warp gradient from the center to the corner farthest from the center point
Closest-side: Specifies the radius length of the warp gradient to the nearest edge from the center to the center
Closest-corner: Specifies the radius length of the warp gradient from the center to the nearest corner from the center point
Farthest-side: Specifies the radius length of the warp gradient to center to the edge farthest from the center
Position: Defines the position of the gradient, the possible values:
Center: (default) sets the vertical coordinate between the center of the center of the warp gradient
Top: Sets the vertical coordinate at the top of the center of the warp gradient
Bottom: Sets the vertical coordinate at the bottom of the center of the warp gradient
Start-color, ..., last-color: Used to specify the starting color of the gradient

CSS bit 3-5 ways to implement the ring