CSS3新特性简单总结(持续补充常用到的情景)

1.CSS3边框
border-radius 左上右下
box-shadow box-shadow: 水平阴影(可负值,必) 垂直阴影(可负值,必) 模糊距离阴影尺寸颜色颜色 inset(将外部阴影改为内部);
border-image 路径边框向内偏移边框宽度边框图像区域超出边框的量 rounded(铺满)/repeat(平铺)/stretch(拉伸)

2.CSS3背景
background-size 规定背景图片的尺寸
background-origin 规定背景图片的定位区域(content-box、padding-box 或 border-box)
允许使用多个背景图像

 background-image:url(bg_flower.gif),url(bg_flower_2.gif);

3.CSS3文本效果
text-shadow 水平阴影垂直阴影模糊距离阴影颜色

word-break:break-all　　　在超过容器宽度时，若有一个单词很长，则会将单词截断，分开写
word-wrap:break-word　　在超过容器宽度时，若有一个单词很长，则会将单词放到下一行，而不对单词进行截断
white-space:normal(自动换行)，当写入的文字超过定义的宽度后会自动换行，但当写入的数据是一堆没有空格
的字符或者字母或者数字时，超过容器的宽度时就会把容器撑大，不换行
常用(省略号用法)
单行文字实现省略号

width:100%;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis

规定多行实现省略

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

text-overflow:ellipsis

**webpack打包工具时，会忽视这个-webkit-box-orient属性
这个时候需要这样写

/*! autoprefixer: off */

-webkit-box-orient: vertical;

/* autoprefixer: on */

4.CSS3转换(2D)
transform-origin:被转换元素的位置
transform : 对元素进行移动,缩放,转动,拉长或拉伸
translate(x,y) 沿X,Y轴移动的元素
scale(x,y) 缩放大小
rotate(旋转角度)
skew(x-angle,y-angle) 倾斜转换(少用)
全家福:旋转、缩放、移动以及倾斜元素
matrix()

5.CSS3转换(3D) 比2D都多了一个Z(详细看API)

6.CSS３过渡(可以有多项，用，号分隔就好)
需要两项内容　效果作用于哪个属性　时效　效果(linear，ease等)
transition:width 2s, height 2s;

CSS３动画(可以参考一下animate.css)
animation:至少有规定动画名称动画时长 (还有其他的参数可选)详细的可以参考API

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

或者

@keyframes myfirst

{

0% {background: red;}

25% {background: yellow;}

50% {background: blue;}

100% {background: green;}

}

巴特西

CSS3新特性简单总结(持续补充常用到的情景)

最新文章

热门文章