关键词:
使用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:用于指定渐变的起始颜色
基础css实现多重边框的5种方式
原文:【基础】CSS实现多重边框的5种方式简言目前最优雅地实现多重边框的方案是利用CSS3的box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际... 查看详情
基础css实现多重边框的5种方式
简言目前最优雅地实现多重边框的方案是利用CSS3的box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求等情况,选择最适合的实现... 查看详情
基础css实现多重边框的5种方式
简言目前最优雅地实现多重边框的方案是利用CSS3的box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求等情况,选择最适合的实现... 查看详情
四种方式实现波浪效果(css效果)
一)第一种方法(1)HTML结构1<body>2<divclass="animatewave">3<divclass="w1"></div>4<divclass="w2"></div>5<divclass="w3"></div>6<divclass="w4"></div>7< 查看详情
两种css3圆环进度条详解
...在好好整理一下吧~。 第一种:通过overflow溢出隐藏的方式:这种方法好处在于容易理解,只需要一层一层的嵌套,即可得到效果,但是实现起来较为繁琐,HTML的结构也比较冗余。先看HTML结构:<divclas 查看详情
用纯css实现下拉菜单的几种方式
第一种:display:none和display:block切换1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Document</title>6<style>7ul{8list-style:none;9}10.nav>l 查看详情
css实现正方形div的3种方式
效果图:方法一:使用vw单位<divclass="demo">viewport</div><style>.demo{width:20%;height:20vw;background:#ccc;}</style>方法二:padding-bottom<divclass="demo2"></div>.demo2{width:100% 查看详情
css奇技淫巧box-shadow实现圆环进度条(代码片段)
CSS奇技淫巧Box-shadow实现圆环进度条文章目录CSS奇技淫巧Box-shadow实现圆环进度条一、Box-shadow圆环进度条二、效果预览三、原理刨析四、实际应用五、总结六、参考资料💘七、推荐博文🍗一、Box-shadow圆环进度条实现圆环... 查看详情
css实现圆环效果,利用css实现圆环效果的方法
利用css实现圆环效果的方法发布时间:2020-08-2410:16:31来源:亿速云阅读:135作者:小新这篇文章将为大家详细讲解有关利用css实现圆环效果的方法,小编觉得挺实用的,因此分享给大家做个参考,希望... 查看详情
css实现圆环效果,利用css实现圆环效果的方法
利用css实现圆环效果的方法发布时间:2020-08-2410:16:31来源:亿速云阅读:135作者:小新这篇文章将为大家详细讲解有关利用css实现圆环效果的方法,小编觉得挺实用的,因此分享给大家做个参考,希望... 查看详情
javascript继承有5种实现方式
1.对象冒充functionParent(username){this.username=username;this.hello=function(){alert(this.username);}}functionChild(username,password){//通过以下3行实现将Parent的属性和方法追加到Child中,从而实现集成实现继承//1.this.method是作为一个临时的属性 查看详情
单例模式5种实现方式(代码片段)
1.懒汉模式publicclassSingletonprivatestaticSingletoninstance;privateSingleton()publicstaticSinglentongetInstance()if(instance==null)instance=newSingleton();returninstance;2.Doubleclicklock实现单例3.静态内部类实现单例4.枚举实现单例5.容器实现单例 查看详情
css实现圆环效果,利用css实现圆环效果的方法
利用css实现圆环效果的方法发布时间:2020-08-2410:16:31来源:亿速云阅读:135作者:小新这篇文章将为大家详细讲解有关利用css实现圆环效果的方法,小编觉得挺实用的,因此分享给大家做个参考,希望... 查看详情
c++学习--点滴记录005(代码片段)
5数组5.1概述所谓数组,就是一个集合,里面存放了相同类型的数据元素特点1:数组中的每个数据元素都是相同的数据类型特点2:数组是由连续的内存位置组成的5.2一维数组5.2.1一维数组定义方式一维数组定义的... 查看详情
css实现垂直居中的5种方法
...的优缺点。 方法一这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical- 查看详情
css实现垂直居中的5种方法
...的优缺点。 方法一这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical- 查看详情
css实现垂直居中的5种方法
...各自的优缺点。方法一这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align& 查看详情
写入css的3种方式
...个问题)CSS实现了网页内容和页面效果的彻底分离。 方式一:内联样式表(在标签内设置元素的样式) 优点:比较灵活,想给谁设就该谁设 缺点:写一次只能设置一个 <pstyle="background:red;font-size 查看详情