css点滴3—5种方式实现圆环

栏目: CSS · 发布时间: 6年前

内容简介:使用css实现圆环,最简单的方式就是使用嵌套标签,设置border-radius就可以实现,但是这个是最简单的方式,这篇文章我们介绍5种方式实现圆环。1.两个标签嵌套html代码:

使用css实现圆环,最简单的方式就是使用嵌套标签,设置border-radius就可以实现,但是这个是最简单的方式,这篇文章我们介绍5种方式实现圆环。

1.两个标签嵌套

html代码:

<div class="element1">
    <div class="child1">1</div>
</div>

css代码:

        .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;
        }

页面效果:

css点滴3—5种方式实现圆环

两个div嵌套,外部div尺寸是内部div的两倍,设置border-radius为50%,同时内部的div设置position为relative,相对本身偏移,向下偏移为本身高度的一半,向右偏移为本身高度的一半。

2.使用伪元素befor,after

html代码:

<div class="element2"></div>

css代码:

        .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;
        }

页面效果:

css点滴3—5种方式实现圆环

这个和方法一类似,设置元素后面设置一个伪元素,宽和高是前面元素的一半,同样是设置position为relative,向右偏移为本身宽度的一半,向下偏移为高度的一半。

3.使用border

html代码:

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

css代码:

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

页面效果:

css点滴3—5种方式实现圆环

这种方法的思路更简单,就是给元素设置一个比较宽的border,border的宽度是本身宽度的一半,这样看上去就像是一个圆环。

4.使用border-shadow

html代码:

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

css代码:

        .element4{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px #40ff2e ;
            margin: auto;
        }

页面效果:

这种方式的思路也是比较简单,只要知道box-shadow这个css属性就可以了,这里设置元素的阴影尺寸是本身尺寸的一半。如下:

h-shadow:水平阴影的位置,允许负值,必须。

v-shadow:垂直阴影的位置,允许负值,必须。

blur:模糊距离,可选。

spread:阴影的尺寸,可选。

color:阴影的颜色,可选。

inset:将外部阴影改为内部阴影,可选。

5. 使用radial-gradient

html代码:

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

css代码:

        .element5 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: -webkit-radial-gradient( circle closest-side,#009966 50%,#40ff2e 50%);
        }

页面效果:

css点滴3—5种方式实现圆环

这里使用的是使用经向渐变,同上也是要搞清楚radial-gradient这个css属性:

shape:确定园的类型,ellipse:指定椭圆形的经向渐变,circle:指定原型的经向渐变。

size:定义渐变的大小,可能值:

farthest-corner (默认):指定经向渐变的半径长度为从圆心到离圆心最远的角

closest-side:指定经向渐变的半径长度为从圆心到离圆心最近的边

closest-corner:指定经向渐变的半径长度为从圆心到离圆心最近的角

farthest-side:指定经向渐变的半径长度为重圆心到离圆心最远的边

position:定义渐变的位置,可能的值:

center:(默认值)设置中间为经向渐变圆心的纵向坐标

top:设置顶部为经向渐变圆心的纵向坐标

bottom:设置底部为经向渐变圆心的纵向坐标

start-color, ..., last-color:用于指定渐变的起始颜色


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Everything Store

The Everything Store

Brad Stone / Little, Brown and Company / 2013-10-22 / USD 28.00

The definitive story of Amazon.com, one of the most successful companies in the world, and of its driven, brilliant founder, Jeff Bezos. Amazon.com started off delivering books through the mail. Bu......一起来看看 《The Everything Store》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具