实现两个圆嵌套

最新推荐文章于 2023-02-22 15:28:13 发布

微凉呀

最新推荐文章于 2023-02-22 15:28:13 发布

阅读量998

点赞数 1

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/zoezoezoezoe1234/article/details/120524126

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了两种使用CSS实现圆环内嵌套小圆的方法。方法一是利用伪元素`::after`，通过绝对定位和`transform`实现圆心对齐；方法二是借助`box-shadow`的模糊效果模拟内嵌圆。这两种方法为网页设计提供了灵活的布局方案。

摘要由CSDN通过智能技术生成

方法一：伪元素实现定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现两个圆嵌套</title>
</head>
<style>
  #box{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background-color: pink;
    position: relative;
  }
  /* 伪元素实现中间的小圆 */
  #box:after{
    display: block;
    content: '';
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: skyblue;
    /* 垂直居中定位 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<body>
  <div id="box"></div>
</body>
</html>

效果如下：
在这里插入图片描述

方法二：使用box-shadow实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现两个圆嵌套</title>
</head>
<style>
  body{
    margin: 100px;
  }
  #box{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: pink;
    box-shadow: 0 0 0 50px skyblue ;
    /* box-shadow: h-shadow v-shadow blur spread color inset;
    水平阴影的位置|垂直阴影的位置|模糊距离|阴影的尺寸|阴影的颜色  */
    /* 模糊距离：效果是一个模糊的圆  */
    /* 阴影尺寸：阴影外延出去总的长度 */
  }
</style>
<body>
  <div id="box"></div>
</body>
</html>