css实现圆环效果,利用css实现圆环效果的方法

利用css实现圆环效果的方法

发布时间：2020-08-24 10:16:31

来源：亿速云

阅读：135

作者：小新

这篇文章将为大家详细讲解有关利用css实现圆环效果的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

css实现圆环效果有多种方法，这里为大家分享五种方法：

首先我们来看一下实现效果：

接下来为大家介绍方法：

1、两个标签的嵌套

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;

}

2、使用伪元素，before／after

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;

}

3、使用border:

width: 100px;

height: 100px;

background-color: #009966;

border-radius: 50%;

border: 50px solid lightpink ;

}

(学习视频推荐：css视频教程)

4、使用border-shadow

width: 100px;

height: 100px;

background-color: #009966;

border-radius: 50%;

box-shadow: 0 0 0 50px lightpink ;

margin: auto;

}

.element5{

width: 200px;

height: 200px;

background-color: #009966;

border-radius: 50%;

box-shadow: 0 0 0 50px lightpink inset;

margin: auto;

}

5、使用radial-gradient

width: 200px;

height: 200px;

border-radius: 50%;

background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);

}

关于利用css实现圆环效果的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

css实现圆环效果,利用css实现圆环效果的方法相关推荐

css表格排序,纯CSS实现表格排序-利用CSS 变量和Flexbox
1.引子今天闲逛知名前端资讯站Front-End Front,发现一个比较有意思的效果,给大家分享下,希望可以对大家有所启发. 纯CSS实现表格排序心急的同学,先看效果,我放在codepen上. ...
html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
html用css完成动画效果图,利用CSS Sprite实现PNG图片动画
利用CSS Sprite实现PNG图片动画 12月 6, 2012 评论 (6) Sponsor 如题,今天将会和大家讲解如何利用CSS Sprite(CSS雪碧)来实现PNG图片动画,就像GIF一样 ...
html css年会照片抽奖,利用css实现一个抽奖动画效果
首先我们先来看下最终的运行效果: 从效果图我们可以看到,抽奖会自动进行,并显示中奖信息. 这个效果基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 具体步骤如下: 首先画一个转盘 ...
带电圆环matlab,利用MATLAB分析圆环电流的磁场分布
第29卷第1期 V ol 129 N o 11 长春师范学院学报(自然科学版) Journal of Changchun N ormal University (Natural Science ) 2 ...
matlab中圆环表示,利用MATLAB分析圆环电流的磁场分布.doc
第 29卷第 1期 V ol 129 N o 11 长春师范学院学报 (自然科学版 Journal of Changchun N ormal University (Natural Science 2 ...
css 毛玻璃_我写CSS的常用套路(附demo的效果实现与源码）
作者:alphardex 出自:掘金原文:https://juejin.im/post/5e070cd9f265da33f8653f00 前言本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万 ...
3dmax：3dmax三维VR渲染设置之高级灯光渲染(经典案例—利用天光制作天光效果)图文教程
3dmax:3dmax三维VR渲染设置之高级灯光渲染(经典案例-利用目标平行光模拟真实太阳光效果)图文教程目录利用天光制作天光效果利用天光制作天光效果

css实现圆环效果,利用css实现圆环效果的方法

css实现圆环效果,利用css实现圆环效果的方法相关推荐

最新文章

热门文章