css3常见新特性汇总解读

阴影

文本阴影:

text-shadow:3px 3px 6px #666; /* 偏移量x 偏移量y  模糊的距离(模糊度,可选)  颜色(可选)。 */

盒子阴影:

box-shadow:3px 3px 10px 1px #666 inset; /* 偏移量x 偏移量y  模糊的距离(模糊度,可选) 阴影的大小(可选) 颜色(可选) 从外层的阴影向内侧阴影(两种立体效果,可选)。*/

边框

边框圆角:

border-radius:10px;

边框图片:

border-image: url(xxx.png)(地址) number|%|fill(图像边框的向内偏移) 10(图像的宽度) length(边框图像与边框的距离<默认为0)|number(代表相应的border-width的倍数) repeat|initial(拉伸)|inherit(铺满);

背景

/* 背景大小: */
background-size:100px; /* 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为"auto"。) */
background-size:10%; /* 以父元素的百分比来设置背景图像的宽度和高度。后面解释同上 */
background-size:cover; /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 */
background-size:contain; /* 把图像图像扩展至最大尺寸，以使其宽度或高度最大化为止。 */
/* 背景起始点: */
background-origin: padding-box(从padding开始)|border-box(从border开始)|content-box(从内容开始);
/* 背景区域裁切: */
background-clip: border-box|padding-box|content-box; /* 解释同上 */
/* 多背景: */
background-image: url("aaa.png"),url("sss.png"),url("ddd.png");
/* 背景图像定位: */
background-position:left;(top left / x% y% / 10px 20px);
/* 背景图像固定方式: */
background-attachment:scroll(默认,背景图像会随着页面其余部分的滚动而移动)/fixed
/* 线性渐变: */
background-image: linear-gradient(to left, red, yellow, green);
background-image: linear-gradient(to left, red 10%, yellow 30%, green 50%); /* 意味着从10%开始渐变到30%时为黄色再到50%时为绿色结束渐变，剩下的为绿色 */
background-image: linear-gradient(to bottom right, red, yellow, green);
background-image: linear-gradient(-90deg, red, yellow, green);
background-image: repeating-linear-gradient(red, yellow 10%, green 20%); /* 重复渐变 */
/* 径向渐变: */
background-image: radial-gradient(red, yellow, green);
background-image: radial-gradient(red 10%, yellow 30%, green 50%); /* 百分比解释同上 */
background-image: radial-gradient(circle, red, yellow, green); /* 第一个参数circle表示圆形,ellipse(默认)表示椭圆形 */

滤镜

filter:blur(px)/brightness(%)/contrast(%)/drop-shadow(h-shadow v-shadow blur spread color)/grayscale(%)/hue-rotate(deg) /* 详情请自行百度 */

transition

一般放在开始状态里,结合:hover使用。

transition: width/height/... 2s(运动时长) linear/ease/...(运动方法) 2s(延迟时长);

transform

transform: none|transform-functions(translate偏移/scale缩放/rotate旋转/skew倾斜、扭曲);

animation

animation: name(动画的名字) 2s(动画时间) linear/ease/...(运动方法) 2s(延迟时长) n|infinite(播放次数) normal/alternate(是否反向播放);
animation:mymove 5s infinite;
@keyframes mymove
{
 from {left:0px;}
 to {left:200px;}
}

其他

选择器:
    nth-child()、nth-of-type()、:checked、:disabled
媒体查询:
    @media
弹性盒子:

display: flex;

justify-content: center;
justify-content: space-around;
justify-content: space-between;

align-items: center;
align-items: flex-start;
align-items: flex-end;

flex: 1;