CSS3总结

1、边框

border-image: 边框图片

border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */

 

2、圆角

border-radius： 圆角

设置4个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

设置3个值：第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

设置2个值：第一个值为左上角与右下角，第二个值为右上角与左下角

设置1个值：4个值一样

/* 画一个圆 */
width:40px;
height:40px;
border:1px solid;
border-radius:20px

 

3、盒子阴影

box-shadow： 盒子阴影

box-shadow：x轴  y轴  模糊范围  模糊距离  颜色

box-shadow: box-shadow: 10px 10px 5px 10px #888888; 

 

4、文字阴影

text-shadow：文字阴影

 

5、背景

background-image：背景图片

background-size：图片大小

background-origin：背景区域

background-clip：背景剪裁

 

多背景图片设置

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

 

合并缩写使用规则：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

拆解使用：

background-image:url1,url2,...,urlN;

background-repeat : repeat1,repeat2,...,repeatN;

backround-position : position1,position2,...,positionN;

background-size : size1,size2,...,sizeN;

background-attachment : attachment1,attachment2,...,attachmentN;

background-clip : clip1,clip2,...,clipN;

background-origin : origin1,origin2,...,originN;

background-color : color;

 

6、渐变

线性渐变：

角度渐变（从一个角度开始，到它的对角结束）

background-image: linear-gradient(angle, color-stop1, color-stop2);

重复：background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

 

 

 

径向渐变：

background-image: radial-gradient(circle, red, yellow, green);

 

 重复：background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

 

锥形渐变：

background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff,#ff0000);

 

 

7、2D转换

位移
transform: translate(100px,100px);
位移是相对元素自身的位置发生位置改变

 

旋转
transform: rotate(60deg);
取值为角度

缩放
transform: scale(0.5,1);
取值为倍数关系，缩小大于0小于1，放大设置大于1

倾斜
transform: skew(30deg,30deg);
第一个值代表沿着x轴方向倾斜
第二个值代表沿着y轴方向倾斜

 

8、3D转换

位移
transform: translateX() translateY() translateZ()

旋转
transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);

缩放
transform: scaleX(0.5) scaleY(1) scaleZ(1);
倾斜
transform: skewX(30deg) skewY();

transform-style: preserve-3d;
将平面图形转换为立体图形

 

9、过渡

transition: property duration timing-function delay 

transition属性是个复合属性，包括以下几个子属性：

• transition-property ：规定设置过渡效果的css属性名称
• transition-duration ：规定完成过渡效果需要多少秒或毫秒
• transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
• transition-delay ：指定开始出现的延迟时间

默认值分别为：all 0 ease 0 

注：transition-duration 时长为0，不会产生过渡效果

改变多个css属性的过渡效果时：

transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;

 

10、动画

给动画设置属性：

div
{
    animation-name: myfirst; //规定 @keyframes 动画的名称。
    animation-duration: 5s; //规定动画完成一个周期所花费的秒或毫秒。默认是 0。
    animation-timing-function: linear; //规定动画的速度曲线。默认是 "ease"。
    animation-delay: 2s; //规定动画何时开始。默认是 0。
    animation-iteration-count: infinite; //规定动画被播放的次数。默认是 1。
    animation-direction: alternate; //规定动画是否在下一周期逆向地播放。默认是 "normal"。
    animation-play-state: running; //规定动画是否正在运行或暂停。默认是 "running"。
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

使用了简写的动画 animation 属性：

div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器。

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

 

11、flex弹性布局

设置父元素为伸缩盒子【直接父元素】
display： flex

1. 子元素是按照伸缩盒子中主轴方向显示
2. 只有伸缩盒子才有主轴和侧轴
3. 主轴： 默认水平从左向右显示
4。 侧轴： 始终要垂直于主轴

 

设置伸缩盒子主轴方向（flex-direction）
flex-direction: row; 【默认值】
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

 

设置元素在主轴的对齐方式( justify-content)
/* 设置子元素在主轴方向的对齐方式 */
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

 

设置元素在侧轴的对齐方式 （align-items）
align-items: flex-start;
align-items: flex-end;
align-items: center;

/* 默认值 */
align-items: stretch;

 

设置元素是否换行显示（flex-wrap）
1. 在伸缩盒子中所有的元素默认都会在一行上显示
2. 如果希望换行：
flex-wrap: wrap | nowrap;

 

设置元素换行后的对齐方式（ align-content）

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
/* 换行后的默认值 */
align-content: stretch;

 

12、媒体查询

例子： 浏览器窗口小于480px时 改变背景颜色和字体大小，默认字体16px,可以使用rem布局1rem==16px

@media screen and (max-width: 480px) {
　　html{
　　　　font-size:15px;
　　}
    body {
        background-color: lightgreen;
    }
}