CSS3容易忘记的知识点记录(01)

1.background-attachment: fixed;       //可以指定背景图片是否跟着滚动条一起滚动!

2.HTML中链接标签的四种状态用CSS实现:

a:LINK { /* 点链接之前 */
    color: blue;
}

a:HOVER { /* 鼠标移动到上面的时候*/
    color: red;
}

a:ACTIVE { /* 鼠标正在点链接的时候*/
    color: blue;
}

a:VISITED { /* 鼠标已经点了链接之后*/
    color: black;
}

3.实现表格的边框合并

border-collapse: collapse;

4.用户突出效果的轮廓

outline   设置轮廓属性

outline-color 设置轮廓颜色

outline-style 设置轮廓的样式

outline-width 设置轮廓的宽度

5.让一个div居中的CSS方式:

margin-left: auto;
margin-right: auto;

这样子就实现了水平上的居中,是不是很简单,比用js实现简单多了哦

6.对齐的操作

    6.1使用margin 这个就是第五点所使用的

    6.2使用position属性,配合left,right使用

    6.3使用float属性进行对齐

7.让列表一行的显示,就是li标签一行显示出来

li{
    display: inline;
}

这样子就实现列表的横向放置

8.透明度的使用

opacity: 0.5; /*表示半透明,可以用在图片元素img上,等等*/

9.CSS3新加的2D和3D效果的兼容(例子一枚)

transform:translate(100px,100px);

-webkit-transform:translate(100px,100px); /*支持safari chrome*/

-ms-transform:translate(100px,100px);/*支持IE,360浏览器也是IE的内核*/

-o-transform:translate(100px,100px);/*支持opera*/

-moz-transform:translate(100px,100px);/*支持Firefox*/

放一张介绍:

10.一个旋转并且缩放的小例子

div {
    width: 100px;
    height: 100px;
    background-color: aqua;
    transition: width 10s, height 10s, transform 10s;
    /* 上句并不起作用,实际起作用的是下一句 */
    -moz-transition: width 2s, height 2s, -moz-transform 2s;
}

div:HOVER {
    width: 200px;
    height: 400px;
    background-color: fuchsia;
    transform: rotate(360deg);
    /* 上句并不起作用,实际起作用的是下一句 */
    -moz-transform: rotate(360deg);
}

这个小例子只能在火狐下运行正常,如果你的浏览器不是火狐的,请照着第九点写上对应浏览器能识别的代码,放上一张介绍

11.实现一个正方形的平移动画,亲测可行,Chrome,Firfox,其他留给你们去测试吧

div {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    animation: anim 5s;
}

@keyframes anim {
    0%{
        background-color: green;
        left: 0px;
        top: 0px
    }
    25%{
        background-color: red;
        left: 100px;
        top: 0px
    }
    50%{
        background-color: blue;
        left: 100px;
        top: 100px
    }
    75%{
        background-color: red;
        left: 0px;
        top: 100px
    }
    100%{
        background-color: blue;
        left: 0px;
        top: 0px
    }
}