CSS3

nth-child() nth-child()不止作用于子元素，还会作用于孙子元素，比如：div：nth-child（1），不止会作用于div，还会作用于div里的div.

&是sass的语法，代表上一级选择器 等同于 .bordered.float 是串联选择器，作用在同一标签上 .bordered .top 是后代选择器，作用在不同标签上

CSS利用flex实现多列等高布局CSS利用flex实现多列等高布局CSS利用flex实现多列等高布局

1、我们利用a:link 进行对未点击的超链接进行样式设置； 2、接着利用a:visited进行对已点击的超链接进行设置； 3、最后，我们还可以对鼠标悬停的状态进行样式修改，如图代码 a:hover；

权重比较 共分为4个等级： 第一等：代表内联样式，如: style=“xxx”，权值为1000。 第二等：代表ID选择器，如：#content，权值为100。 第三等：代表类，伪类和属性选择器，如.c

一、简介 弹性布局（Flexible Box）用来为盒装模型提供最大的灵活性，是CSS3的一种新的布局模式，它是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹

一、demo初体验 二、注意 min-width和max-width定义的是页面可见区域的最小宽度和最大宽度。 max-width和min-width都是包含等于的，例如： 三、案例演示 媒体查询修改

在这篇文章中，我们来学习一下“CSS中隐藏div实现缓慢显示效果的方法是什么”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

``` 1、鼠标移动上去会显示禁用样式。 cursor:no-drop 或 cursor:not-allowed 2、鼠标移动上去变小手样式。 cursor:pointer; 3、等待光标 curso

效果图 默认情况下，预览效果如下图所示。 当鼠标移到图片上面时，文字介绍层会平滑过渡展示出来，效果如下图所示。 分析： 这个例子用到了CSS3过渡、RGBA颜色等，代码量比较大，不过我们只需要关心过渡

CSS3实现手风琴效果 .item:nth-child(1){width:40%;background-color: red;} .item:nth-child(2) {backg

使用CSS3实现鼠标放到图片上出现白光闪过效果。原理：我们使用transform:skewX(-30deg);定义一道平行四边形的白光，然后使用绝对定位把白光设置在图片的左边。

有一条属性可以设置是否还原： animation-fill-mode:forwards; 表示动画结束保持当前状态

使用CSS3实现小车平移动画。animation和translate相互配合。关键点：使用z-index让小车盖在路上面

使用CSS3来让div在水平方向上平移，主要用到了animation和 transform: translateX()的属性

在CSS3中，我们可以使用:active伪类结合过渡属性来实现一个“脉动效果”。实现效果：当我们击div元素后，可以看到从小放大，然后再逐渐回归到原来的大小。

前言 由于字体大小最小是12px，但是某些特殊情况下，可能需要更小的文字，这个时候CSS3缩放属性就派上用场了 tranform:scale(.5)

css初始化的库，直接npm下载即可，https://www.bootcdn.cn/normalize/

``` #div{ width: 120px; height: 120px; background-color: red; padding: 20px; border:10px solid yello

写在前面的话：     在日常的工作中遇到一个需求，需要用圆柱体来表现每个项目的比例，首先想到的会事使用echarts中的柱状图来表现，但是为了一个圆柱体引用那么庞大的js库有点不合时宜的味道。其次是