文章目录1.选择器2. 遮罩3. 伪元素4.媒体查询5. 滚动条6 超过显示省略号6.1 单行6.2 两行7. calc8. 图片hover显示文字 1.选择器 偶数.index_tab:nth-child(even) 基数.index_tab:nth-child(odd) 最后一个.index_tab:last-child 第一个.index_tab:first-child 第几个:n...

文章目录1. 弹出层2. flex3. 连续动画4.Vue动画4.1动画5. 关键帧动画5.1 animate.css5.2 animation5.3例子5.4 匹配各种浏览器6. 水波纹效果7.div边缘发光8. 水平滚动动画 1. 弹出层 <!-- 动画 start --> <view class="setting__options--toUp {{active_num=...

文章目录1. 使用css3的translate水平垂直居中元素2.flex3.行内元素4. 使用css3计算的方式居中元素calc1.1.1.1.1. 1. 使用css3的translate水平垂直居中元素 <div class="center"> 　　<div class="center_text"> 　　　　我是要居中的内容 </div> </d...

文章目录1基础1.1 如何让最后一项右边对齐margin-left: auto; 垂直方向对齐方式 不同1.2 justify-content：space-between; 解决最后一排数量不够自动向两端排列问题1.4 flex布局设置width无效 1基础 /* flex */ .flex { display: -webkit-box; display: -webkit-flex; ...

文章目录1. background-origin:2. 水平渐变3. 水平条纹4. 垂直渐变5. 斜向渐变6. 重复渐变7. 椭圆8. 自适应椭圆9. 半椭圆10. 半椭圆11. 四分之一椭圆12. 平行四边形13. 切角效果14. 四个切角15. 弧形切脚16. 梯形17. 简单饼型18. 视觉效果 单侧投影19. 折角效果20.21.18.18. 1. background-origin: ...