CCC
- 第一步，先来一个正方形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS画C</title>
<style>
.box {
width: 100px;
height: 100px;
border: 20px solid #666;
border-left-color:red;
border-right-color:orange;
border-bottom-color:skyblue;
border-top-color:pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
是这样的
Square
-
添加圆角
border-radius: 50%;然后是这样的
ring
-
把右边的圆角变透明
border-right-color:transparent;
CCC
-
改变边框颜色为
skyblue，再稍微调整边框大小border-top-width: 30px;border-bottom-width: 25px;
展示完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS画C</title>
<style>
.box {
width: 100px;
height: 100px;
border: 20px solid #666;
border-color:skyblue;
border-right-color:transparent;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
参考https://www.cnblogs.com/yunfeifei/p/4671930.html
gzh.jpg
每日分享前端技术知识，致力于帮助更多前端人翻过一座座山，踏过一个个坑。
网友评论