CSS3笔记

CSS3

1. CSS3边框

• border-radius 边框圆角
• box-shadow 边框阴影
• border-image 图片边框

2. CSS3背景

• background-size
• background-origin

/*background-size 规定背景图片尺寸*/
div {
    background: url(background_image.png);
    background-size: 200px 100px; /*宽 高*/
}

/*background-origin 规定背景图片放置区域*/
div {
    background: url(background_image.png);
    background-origin: content-box; /*放在content区域*/
}

3. CSS3文本效果

• text-shadow
• word-wrap

/*为文字添加阴影*/
h1 {
	text-shadow: 5px 5px 5px #FF0000;
}

/*自动换行 强制换行*/
p {
    word-wrap:break-word;
}

4. CSS3 2D转换

transform属性

• translate()
• rotate()
• scale()
• skew()
• matrix()

/*将元素移到某位置*/
div {
    transform: translate(50px, 100px);
}
/*将元素旋转给定的角度*/
div {
    transform: rotate(30deg);
}
/*将元素按照给定的宽度高度比例缩小/放大*/
div {
    transform: scale(0.5, 0.8);
}
/*将元素根据给定的水平线和垂直线翻转*/
div {
    transform: skew(30deg, 20deg);
    /*值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。*/
}

5. CSS3 3D转换

• rotateX()
• rotateY()

6. CSS3 过渡

• transition

div {
    transition: width 2s, height 2s;
    /*变换到指定width和height经过2s时间*/
}

7. CSS3动画

• @keyframes
• animation

/*先用keyframes创建动画*/
@keyframes myAnimation {
    from {background: red;}
    to {background: yellow}
}
/*把myAnimation绑定到div元素*/
div {
    animation: myAnimation 5s;
}

创建循环动画

div {
    animation: myAnimation infinite;
    animation-duration: 5s;
    /*5s一个周期播放myAnimation动画*/
}