学习css3，使用代码实现一根心爱的二踢脚

2023 春节快到了，虽然还在上班，但心情早已开始激动，感叹 2022 终将过去，喜迎 2023 兔年吧。让我以激动的心情，利用所学 css3 代码知识，实现一根心爱的二踢脚吧。

目录

1、实现思路 

2、实现二踢脚的主体圆柱部分

3、实现顶部和底部封口部分 

4、引火线（炮蔫儿）的实现 

5、css 书写顺序说明 

6、完整源代码

7、结语：

1、实现思路 

通过布局 div 实现主体区域，画出圆柱形；

利用 before after 伪类封填圆柱形的顶部和底部；

并且添加阴影效果，使效果更加真实；

添加一根引火线（不知道你们咋叫，我们叫炮蔫儿），并且做出 transform 旋转效果，更利于小伙伴去引燃。

2、实现二踢脚的主体圆柱部分

这里主要是布局一个 DIV 元素，根据现实的二踢脚设置其宽高，并且利用 css3 的 box-shadow 属性添加阴影效果。

为了增添节日气氛，居中布局 2023 字样，并且设置为大红色。代码如下：

        2

        0

        2

        3


// css 部分
* {
   margin: 0;
   padding: 0;
}
.ertijiao {
   position: relative;
   top: 74px;
   margin: 100px auto;
   box-shadow: -1px 56px 5px #888888;
   width: 50px;
   height: 180px;
   text-align: center;
   background-color: #c6cd97;
   font-size: 30px;
   color: red;
   font-weight: bold;                 
}

3、实现顶部和底部封口部分 

二踢脚是圆柱形的，所以为了增加实体特效，进行顶部和底部的椭圆形布局，这里采用的 before 和 after 的伪类，并且通过 border-radius 设置原型弧度，然后再利用宽高设置形成最终的椭圆形状。代码如下：

.ertijiao:before {
   position: absolute;
   top: -10.5px;
   z-index: 1;
   height: 20px;
   width: 100%;
   content: '';
   display: block;
   border-radius: 50%;
   background-color: #ceb49b;
}

.ertijiao:after {
   position: absolute;
   bottom: -10px;
   height: 15px;
   width: 100%;
   border-radius: 50%;
   content: '';
   display: block;
   background-color: #1d120e;
}

4、引火线（炮蔫儿）的实现 

这里比较简单，采用一个 DIV 元素，对其进行绝对定位。关键是要有一个角度旋转，这里旋转了 30 度，更有利于小伙伴去引燃火热的 2023 年。代码如下：

    2

    0

    2

    3
    



// css 部分
.pao-nian-er {
   position: absolute;
   left: 44px;
   bottom: 36px;
   width: 40px;
   height: 4px;
   background: #616044;
   transform: rotate(30deg);
   box-shadow: 4px 2px 5px #000044;
}

最终实现效果如图：

5、css 书写顺序说明 

很多小伙伴其实对于 css 的书写顺序并不是太敏感，想到哪里就写到哪里，其实这是不太合适的。其实顺序应该大致是这样子的：

△ 首先书写的是外部定位的属性样式，例如：

   position，overflow，float 等

   top left margin-top margin-left 等

△ 然后是表框相关的，例如：

   border border-radius 等

△ 然后是内部填充或者内部布局相关的，例如：

width height 等

  display padding  background 等

△ 然后是内部字体相关的

整体是一个由外而内的过程

6、完整源代码

    
    
    


    

        

            2

            0

            2

            3
            

        
    
    

7、结语：

吉祥的兔年终归还是来了，大家在 2022 年真是艰苦卓绝的一年，疫情，工作，小洋人，希望在这个喜庆的二踢脚的点燃下，喜迎 2023，点燃你，温暖我。