1.text-shadow 文本阴影
text-shadow: 5px 5px 5px #FF0000;
2.box-shadow 盒子阴影
box-shadow: 10px 10px 5px #888888; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 卡片效果 box-shadow 的顺序依次为: h-shadow v-shadow blur spread color insect 水平阴影 垂直阴影 模糊 阴影尺寸 颜色 外阴影转到内阴影
3.text-overflow 文本溢出
width: 200px; text-overflow: clip|ellipsis|string; //文本溢出 如何显示溢出内容 clip // 修剪文本 ellipsis //显示省略符号来代表被修剪的文本 string //使用给定的字符串来代表被修剪的文本 .ellipsis{ //常用方法 文字内容超过宽度 变... white-space:nowrap; //不换行 overflow:hidden; width:100%; text-overflow:ellipsis }
4.word-wrap 换行
word-wrap: normal|break-word; normal 只在允许的断字点换行(浏览器保持默认处理)。 break-word 在长单词或 URL 地址内部进行换行。 允许长单词或 URL 地址换行到下一行
5.word-break换行
word-break: normal|break-all|keep-all; 值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。
6.white-space 元素内的空白怎样处理
white-space: 值 描述 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 pre-wrap 保留空白符序列,但是正常地进行换行。 pre-line 合并空白符序列,但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。
7.text-align 文字对其方式
值 描述 left 把文本排列到左边。默认值:由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。 justify 实现两端对齐文本效果。 inherit 规定应该从父元素继承 text-align 属性的值。
8. @font-face 引入指定字体
@font-face { font-family: myFirstFont; src: url(sansation_light.woff); } @font-face: 描述符 值 描述 font-family name 必需。规定字体的名称。 src URL 必需。定义字体文件的 URL。 font-stretch 可选。定义如何拉伸字体。默认是 "normal"。 normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded font-style 可选。定义字体的样式。默认是 "normal"。 normal italic oblique font-weight 可选。定义字体的粗细。默认是 "normal"。 normal bold 100 -900 unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。
9. transform 2D 转换 (移动、缩放、转动、拉长或拉伸)
### 1.translate() 移动
transform: translate(50px,100px); 元素向X轴移动50像素 Y轴移动100像素
2.rotate() 旋转
rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。 transform: rotate(30deg); //顺时针旋转30度。
3.scale() 缩放
scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数: transform: scale(2,3); //宽度*2 高度*3 transform: scale(1,4); //宽度不变 高度*4
4. skew() 倾斜转换
transform: skew(30deg,20deg); //元素在X轴和Y轴上倾斜30度20度。 skewX;表示只在X轴(水平方向)倾斜。 skewY;表示只在Y轴(垂直方向)倾斜。
5.matrix()
matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。 利用matrix()方法旋转div元素30°: transform:matrix(0.866,0.5,-0.5,0.866,0,0);
10.transform 3D转换
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。 translate3d(x,y,z) 定义 3D 转化。 translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。 translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。 translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。 scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。 scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿 X 轴的 3D 旋转。 rotateY(angle) 定义沿 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿 Z 轴的 3D 旋转。 perspective(n) 定义 3D 转换元素的透视视图。 2d转换 只能在平面上转换 3d转换 是在立体空间中转换
11. transition 过渡
例子: 鼠标移入div上 宽度2s内变为200px 高度2s内变为200px 2s内转换180° div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; transition: width 2s, height 2s, transform 2s; } div:hover { width: 200px; height: 200px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } 过渡属性: transition 简写属性,用于在一个属性中设置四个过渡属性。 transition-property 规定应用过渡的 CSS 属性的名称。 transition-duration 定义过渡效果花费的时间。默认是 0。 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 transition-delay 规定过渡效果何时开始。默认是 0。 div { width:100px; height:100px; background:red; transition-property:width; //宽度过渡 transition-duration:1s; //时长 1s transition-timing-function:linear; //效果 transition-delay:2s; //延时2s } div:hover { width:200px; }
1.transition-timing-function 切换效果的速度
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
---|---|
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 |