这是我参与「4月日新计划更文活动」的第13天。
我们今天讲一下如何用css画一个甜甜圈。
先来分析一下这个功能怎么实现哈。
其实本质上就是画一个圆环。
我们可以使用倒角的属性，
画两个同心圆。
然后将内部的圆的背景颜色设置为跟外部画布的颜色一致。
然后外部圆设置为目标颜色。
但是我还想给这个甜甜圈设置一下阴影和高亮，
那我可以再给圆形设置一下box-shadow属性增加一些阴影效果。
这样就可以让整个甜甜圈显得更加立体啦。
好了，解释的差不多了，效果如下：
上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>画一个甜甜圈</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.circle {
width: 200px;
height: 200px;
background: orange;
border-radius: 50%;
position: relative;
left: 100px;
top: 100px;
box-shadow: 0px 0px 10px rgb(255, 234, 0);
}
.inner-circle {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 10px rgb(255, 225, 0);
}
</style>
<body>
<div class="circle">
<div class="inner-circle"></div>
</div>
</body>
</html>
我想了一下，觉得这样代码量还是有一点多。
然后，我还想到了一个更简单的办法。
效果如下:
看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>画一个甜甜圈</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.circle {
width: 100px;
height: 100px;
border: 10px solid #ccc;
border-radius: 50%;
position: relative;
left: 10px;
top: 10px;
}
.inner-circle {
position: absolute;
top: -20px;
left: -20px;
width: 120px;
height: 120px;
border: 10px solid orange;
border-radius: 50%;
transform: rotate(45deg);
}
</style>
<body>
<div class="circle">
<div class="inner-circle"></div>
</div>
</body>
</html>
就是可以直接使用border，即边框的属性直接画一个甜甜圈，而且还不需要增加多余的其他容器和代码。
只需要一个div就能直接实现甜甜圈的效果。
好了，今天又学到了新东西。把每天学到的内容发到掘金上，就会觉得自己每天都有进步。
以上就是我今天学习的如何画甜甜圈的知识点。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
