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

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

 

使用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;
        }

页面效果:

 

两个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;
        }

页面效果:

这个和方法一类似,设置元素后面设置一个伪元素,宽和高是前面元素的一半,同样是设置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;
        }

页面效果:

这种方法的思路更简单,就是给元素设置一个比较宽的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%);
        }

页面效果:

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

shape:确定园的类型,ellipse:指定椭圆形的经向渐变,circle:指定原型的经向渐变。
size:定义渐变的大小,可能值:
farthest-corner (默认):指定经向渐变的半径长度为从圆心到离圆心最远的角
closest-side:指定经向渐变的半径长度为从圆心到离圆心最近的边
closest-corner:指定经向渐变的半径长度为从圆心到离圆心最近的角
farthest-side:指定经向渐变的半径长度为重圆心到离圆心最远的边
position:定义渐变的位置,可能的值:
center:(默认值)设置中间为经向渐变圆心的纵向坐标
top:设置顶部为经向渐变圆心的纵向坐标
bottom:设置底部为经向渐变圆心的纵向坐标
start-color, ..., last-color:用于指定渐变的起始颜色

作者:Tyler Ning
出处:http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址williamningdong@gmail.com  联系我,非常感谢。

目录
相关文章
|
前端开发 容器
面试官:请使用 CSS 实现自适应正方形
面试官:请使用 CSS 实现自适应正方形
410 0
面试官:请使用 CSS 实现自适应正方形
|
前端开发 JavaScript 开发者
利用 SplitingJS 配合 CSS 实现文字&quot;蠕动&quot;效果
利用 SplitingJS 配合 CSS 实现文字&quot;蠕动&quot;效果
283 2
|
前端开发 JavaScript
HTML+CSS+JAVASCRIPT实现——情人节表白情书
本文主要介绍如何使用HTML三件套来实现制作一封情人节表白情书,富含情谊与爱,打动女生的心灵
542 2
HTML+CSS+JAVASCRIPT实现——情人节表白情书
|
2月前
css3实现圆环loading
css3实现圆环loading
17 1
|
4月前
|
前端开发 索引 容器
CSS 实现七彩圆环loading动画
CSS 实现七彩圆环loading动画
42 0
|
9月前
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
193 2
|
前端开发 JavaScript
svg或css,写loading圆环和百分比
svg或css,写loading圆环和百分比
253 0
|
移动开发 前端开发 小程序
【笔记】纯css实现列表水平滑动(图片或文字内容不限)
纯css实现列表水平滑动(图片或文字内容不限)
267 0
|
前端开发 容器
我已经说了5种css居中实现的方式了,面试官竟然说还不够?
这是一篇关于居中对齐方式的总结 开篇之前,先问一下大家都知道几种居中的实现方式? 面试时答出来两三个就不错了,就怕面试官还让你继续说。今天就来总结一下这些居中的方式 使用flex布局设置居中。 使用flex 时也能通过给子项设置margin: auto实现居中。 使用绝对定位的方式实现水平垂直居中。 使用grid设置居中。 使用grid时还能通过给子项设置margin: auto实现居中。 使用tabel-cell实现垂直居中。 还有一种不常用的方法实现垂直居中。 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设
131 0
我已经说了5种css居中实现的方式了,面试官竟然说还不够?
|
前端开发
HTML+CSS实现商品介绍模考(以Apple14为案例)
本文以最通俗易懂的语言为读者提供一个经典CSS小案例,商品介绍模块,并且结合时事,以Apple14为案例进行讲解。
130 0
HTML+CSS实现商品介绍模考(以Apple14为案例)