CSS怎么实现圆圈中带个十字效果

本文小编为大家详细介绍“CSS怎么实现圆圈中带个十字效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS怎么实现圆圈中带个十字效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

圆圈中带个十字

<div class="box"></div>
<style>
    .box {
        width: 30px;
        height: 30px;
        margin: 100px auto;
        background-color: #000;
        border-radius: 50%;
        box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;
        outline: 36px solid #fff;
        outline-offset: -50px;
    }
</style>

css的基本语法是什么

css的基本语法是：

1、css规则由选择器和一条或多条声明两个部分构成；

2、选择器通常是需要改变样式的HTML元素；

3、每条声明由一个属性和一个值组成；

4、属性和属性值被冒号分隔开。

读到这里，这篇“CSS怎么实现圆圈中带个十字效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>