CSS3学习笔记

一、认识C3

CSS3 是 CSS2 的“进化”版本，在CSS2的基础上，增强或新增了许多特性。弥补了C2的不足之处，使得web开发更加便捷高效。
现状：

• 浏览器的支持性比较差，需要添加特定的前缀来处理兼容性；
• 移动端支持由于PC端；
• 在不对的改进中（可以替代一部分js操作），应用相对广泛；
• 坚持渐进增强的原则。

二、细节总结

1. 新增选择器
   属性选择器、伪类选择器、伪元素选择器
   详见： CSS3选择器

（1）伪类与伪元素选择器间的区别：
         伪类是一个“:”，而伪元素是两个“::”，在新版本浏览器中不在区分，均会解析为 2 个 “::”;
（2）伪元素选择器 after/before
         必须有content属性，否则看不到
         默认是行级元素，设置宽高无效，需要将其转化为块级元素
         inline ==> block: display、float、position
         提示：该选择器生成的元素，等价于一个dom元素，但它并不在dom树中生成。

2. 颜色认识（rgb）
   
   颜色选取规律：红橙黄绿青蓝紫 通过rgb()来确定，取值128为界线。

3. 特效及新增内容
   边框特效：box-shadow、border-image、border-radius

   border-radius：使用百分比值参考的是元素实际的宽高。

   文本特效：text-shadow、text-overflow
   背景：background-image、background-size、background-repeat、background-origin
   颜色渐变：线性=background:linear-gradient(); 径向=background:radial-gradient()
   盒子模型：IE、W3C
   flex伸缩布局

   flex布局中，子元素设置了 flex:1;表示占据其父元素剩余空间的全部。

   媒体查询：@media screen …

4. transition过渡效果
   CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

/*
    添加过渡效果：过渡效果只能产生从某个值到另外一个具体的值之间的过渡
    注意：
        1.一定要设置为哪些CSS属性添加过渡效果
        2.一定要设置过渡效果的耗时，否则默认为0，没有过渡效果。
*/
transition-property: height;
transition-duration: 0.5s;
transition:height 0.5s;
-webkit-transition:all 0.5s;

5. transform及动画效果
   CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
   案例：实现无缝滚动

<!-- 结构 -->
<div class="content">
    <ul >
        <li><img src="./imgs/1.jpg" alt=""></li>
        <li><img src="./imgs/2.jpg" alt=""></li>
        <li><img src="./imgs/3.jpg" alt=""></li>
        <li><img src="./imgs/4.jpg" alt=""></li>
        <li><img src="./imgs/5.jpg" alt=""></li>
        <li><img src="./imgs/1.jpg" alt=""></li>
        <li><img src="./imgs/2.jpg" alt=""></li>
        <li><img src="./imgs/3.jpg" alt=""></li>
        <li><img src="./imgs/4.jpg" alt=""></li>
        <li><img src="./imgs/5.jpg" alt=""></li>
    </ul>
</div>

/* 样式 */
<style>
    .content{
        width: 890px;
        height: 134px;
        background: #ccc;
        margin: 100px auto;
        overflow: hidden;
    }
    .content > ul{
        width: 200%;
        list-style: none;
        margin: 0;
        padding: 0;
        animation:move 5s linear infinite;
    }
    .content > ul > li{
        float: left;
    }
    .content > ul:hover{
        cursor: pointer;
        animation-play-state: paused;
        -webkit-animation-play-state:paused;
    }
    @keyframes move {   /*注册动画*/
        from {
        	/*注意：如果之前也设置过transform的属性值，则此处也不要加上，否则会破坏之前的效果*/
            transform: translateX(0);
        }
        to{
            transform: translateX(-890px);
        }
    }
</style>

时钟案例：https://github.com/zlqGitHub/HTML-CSS-JS/blob/master/H5%2BC3/%E4%BB%A3%E7%A0%81/21%E6%97%B6%E9%92%9F%E6%A1%88%E4%BE%8B.html

使用 transform:translate(-50%,-50%) 结合position定位可以实现任意元素垂直水平居中。

6. …