接下来为大家介绍方法:
1、两个标签的嵌套
.element1{ 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
.element2{ 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:
.element3{ width: 100px; height: 100px; background-color: #009966; border-radius: 50%; border: 50px solid lightpink ; }
(学习视频推荐:css视频教程)
4、使用border-shadow
.element4{ 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
.element6{ width: 200px; height: 200px; border-radius: 50%; background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%); }以上就是如何利用css实现圆环效果的详细内容,更多请关注其它相关文章!
写下你的评论吧 !推荐阅读
Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ... [详细]蜡笔小新 2023-10-16 11:26:13 本文由编程笔记#小编为大家整理,主要介绍了css回到顶部按钮相关的知识,希望对你有一定的参考价值。 ... [详细]蜡笔小新 2023-10-17 13:38:49 第一步.hs1{float:left;.mt(.25rem);.ml(.12rem);width:.3rem; ... [详细]蜡笔小新 2023-10-15 12:56:39 canvas画图经常发现他是模糊的。解决这个问题主要从两个方面下手。改变canvas渲染的像素情况:画1像素的线条看起来模糊不清,好像更宽的样子。解决方 ... [详细]蜡笔小新 2023-10-14 13:22:21 之前我曾经写过一篇关于CSS的border-image属性的文章。现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。看起来这是一个非常 ... [详细]蜡笔小新 2023-10-13 16:23:53 2019独角兽企业重金招聘Python工程师标准MaterialDesignLite简介本文主要介绍MaterialDesign设计语言的HTMLCSSJS部分实现。对应每一 ... [详细]蜡笔小新 2023-10-13 13:44:20 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]蜡笔小新 2023-12-14 10:57:47 我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]蜡笔小新 2023-12-14 10:20:38 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]蜡笔小新 2023-12-14 10:11:46 本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]蜡笔小新 2023-12-14 10:06:19 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]蜡笔小新 2023-12-13 21:31:18 目录爬虫06scrapy框架1.scrapy概述安装2.基本使用3.全栈数据的爬取4.五大核心组件对象5.适当提升scrapy爬取数据的效率6.请求传参爬虫06scrapy框架1. ... [详细]蜡笔小新 2023-10-13 22:01:54 博主使用代理IP来自于网上免费提供高匿IP的这个网站用到的库frombs4importBeautifulSoupimportrandomimporturllib.re ... [详细]蜡笔小新 2023-10-13 18:52:58 云在天涯无无边_737这个家伙很懒,什么也没留下!Tags | 热门标签RankList | 热门文章
- 1js 截取字符串里的ip
- 2使用ASP.Net WebAPI构建REST服务
- 3资源管理器崩溃重启的问题
- 4Ftp 命令, 匹配文件 ,多文件下载
- 5宝塔如何备份网站_#12.28#关于网络流传的此次宝塔面板安全漏洞提醒
- 6人工智能离真正的智能还很漫长[python头条资讯]
- 7聊聊数据库~2.SQL环境篇
- 8单元测试java小白_Java单元测试之JUnit篇
- 9Glide入门教程——7. 缓存基础
- 10为什么写C语言弹不出窗口,居然还有SB说C写不出窗口的..
- 11解决主机telnet vmware(ubuntu)不通的问题
- 12Android开发中ViewPager实现导航页和引导页效果(总结)
- 13水果店圈子:水果店损耗成本如何控制,开水果店怎么让水果保鲜
- 14gopath 设置 批处理
- 15《墙有茨》翻译 原文赏析诗人先秦诗经
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有