响应式布局
媒体查询:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
flex布局:
display:flex;
flex-direction:row/column;
justify-content:flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;
order: 1;//排序
grid布局:
display: grid;
grid-template-rows: repeat(2, minmax(0, 1fr));//两列
grid-gap: 50px;//间隙
.item1 { grid-column-start: 1; grid-column-end: 3; }//网格线从第一列开始,第三列结束:
.item1 { grid-row-start: 1; grid-row-end: 3; }//网格线从第一行开始,第三行结束
动画
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
关键词 "from" 和 "to",等同于 0% 和 100%。
过渡
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
注意: 如果未指定的期限,transition将没有任何效果,因为默认值是0。
div
{
transition-property: width;//使用css过度属性的名称
transition-duration: 1s;//过渡效果花费的时间
transition-timing-function: linear;//过渡效果的时间曲线。默认是 "ease"
transition-delay: 2s;//过渡效果何时开始
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
/*简写:*/
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
背景
多重背景,用逗号隔开,所有的图片中显示在最顶端的为第一张。
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
渐变
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
- 径向渐变(Radial Gradients)- 由它们的中心定义
线性渐变从上到下:background-image: linear-gradient(red , yellow);
线性渐变从左到右:background-image: linear-gradient(to right, red , yellow);
线性渐变用角度:background-image: linear-gradient(-90deg, red, yellow);
可带透明度:background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
径向渐变:background-image: radial-gradient(red 5%, yellow 15%, green 60%);
边框
圆角border-radius:
盒阴影:box-shadow: 10px 10px 5px #888888;
边界图片:
div
{
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 */
}
文本效果
阴影 text-shadow: 5px 5px 5px #FF0000;//水平阴影,垂直阴影,模糊的距离,以及阴影的颜色:
溢出 overflow: hidden; text-overflow: ellipsis;
字体
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
2D/3D转换(transform)
2D:
- translate() 平移:translate(50px,100px);
- rotate() 旋转:rotate(30deg);
- scale() 放大或缩小:scale(2,3)
- skew() 倾斜:skew(30deg,20deg)
- matrix() 合并:有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
以上除了旋转和合并,都可以拆成X(),Y(),例如:scaleX(n),scaleY(n)。
3D:
在2D的基础上加上Z()。