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

使用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点滴3—5种方式实现圆环相关推荐

网页设计的css样式,网页设计引入CSS样式的五种方式_css
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; -} 例如: <TD ...
HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者内部引用方式1: 直接在标签内用 style 引用,如: <div ...
html中引入css样式表的三种方式,css引用的几种方式是什么？
HTML怎么引用CSS样式?css引用的几种方式是什么?下面本篇文章就来给大家介绍一下在HTML中引用CSS样式的几种方法,希望对大家有所帮助. 1.行内式在HTML标签中,使用style属性设置C ...
原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式发布时间:2020-08-30 01:46:17 来源:脚本之家阅读:148 作者:外婆的彭湖湾下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
重学前端第一阶段完钢琴项目(document.querySelector js改变css样式的3种方式思路成品)
菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...
JS设置CSS样式的几种方式（js设置!important）
JS设置CSS样式的几种方式(js设置!important) x619y 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效 ...
JS设置CSS样式的几种方式
JS设置CSS样式的几种方式 1.直接设置style的属性某些情况下用这个设置!import值无效如果属性有"-"号,就需要使用驼峰命名法(如textAlign),如果想保留& ...
html js 设置样式,原生js设置样式笔记：JS设置CSS样式的几种方式
document(id名).style.backgroundColor = "ren" css里的属性有-的就去掉将首字母大写. js如何添加CSS样式中的class添加属性用J ...
创建CSS样式的三种方式
CSS基础 - 创建CSS样式的三种方式我们使用CSS的时候,常规有三种创建CSS样式的的方式: 内联样式,内部样式表,外部样式表 1.内联样式 (不常用) style在标签中的情况就是内联样式.不 ...

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

css点滴3—5种方式实现圆环相关推荐

最新文章

热门文章