CSS实现视觉上的游泳圈

最新推荐文章于 2022-07-21 16:47:05 发布

yuan溜溜

最新推荐文章于 2022-07-21 16:47:05 发布

阅读量526

点赞数 3

分类专栏：笔记

本文链接：https://blog.csdn.net/YMX2020/article/details/106694828

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

`CSS`实现视觉上的游泳圈

接着上一篇说一下第二到道css面试题，用css3实现游泳圈

实现结果如下
在这里插入图片描述

实现代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>游泳圈</title>
<style type="text/css">
    .swimming1{
        position: relative;
        width: 200px;
        height: 200px;
        padding: 50px;
        margin:0 auto;
        background: #FFF;
        border-radius: 50%;
        box-shadow:8px 8px 70px -20px #e70c29 inset;
    }
    .swimming2{
      position: absolute;
        width: 180px;
        height: 180px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #fff;
        border-radius: 50%;
        box-shadow:8px 8px 70px -12px #e70c29;
    }
</style>
</head>
<body>
    <div class="swimming1">
        <div class="swimming2"></div>
    </div>
</body>
</html>

其实重点就是css3的一个属性box-shadow，通过这个属性制造阴影视觉，大圈使用向内阴影，小圈使用默认的向外阴影，制造了中间亮两边暗的视觉错觉，给人一种立体的错觉，看起自然像一个3维的游泳圈，😂

下面来介绍一下这个CSS3的属性

box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色
inset	可选，从边框向内阴影