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

最新推荐文章于 2024-05-18 06:08:21 发布

2401_84141419

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量779

点赞数 25

文章标签： css 学习 css3

本文链接：https://blog.csdn.net/2401_84141419/article/details/138247902

版权

}
.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;
}


最终实现效果如图：


![f92945f12a34441bbd7b0e66705fc7fd.png](https://img-blog.csdnimg.cn/f92945f12a34441bbd7b0e66705fc7fd.png)



#### 5、css书写顺序说明


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


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


   position，overflow， float等


   top left margin-top margin-left 等


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


   border border-radius 等


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


width height 等


  display padding  background等


△ 然后是内部字体相关的


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



#### 6、完整源代码

我心爱的烟花