边框
圆角border-radius
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
阴影box-shadow，语法如下
box-shadow: 水平阴影 垂直阴影 [模糊距离 阴影尺寸 颜色 inset（内部阴影）];
边界图片border-image
border-image: url(border.png) 30 30 round;
背景
背景图片background ，可有多个背景，顺序靠前越顶语法缩写如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
background: url(1.gif) right bottom no-repeat, url(paper.gif) left top repeat;
图片大小background-size
位置区域background-Origin
- content-box
- padding-box
- border-box
渐变
IE9+,线性渐变linear-gradient，默认从上到下，可有多个颜色过渡，语法如下：
// direction也可以是angle,如90deg表示从左到右
background: linear-gradient(direction, color-stop1, color-stop2, ...);
从左到右
background: linear-gradient(to right, red , blue);
对角
backgound: linear-gradient(to bottom right, red, blue);
重复线性渐变
background: linear-gradient(red, yellow 10%, blue 20%);
径向渐变radial-gradient，默认从里到外，语法如下：
background: radial-gradient(center, shape size, start-color, ..., last-color);
渐变形状shape: circle或ellipse(默认)
渐变大小size:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
文本效果
文本阴影text-shadow用法类似box-shadow
溢出text-overflow
- clip
- ellipsis
换行word-wrap，某个单词太长，不适合在一个区域内
word-wrap: break-word;
字体
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
2D转换
实现移动、旋转、缩放、倾斜
移动translate
/* 向右向下 */
transform: translate(10px, 10px);
旋转rotate
/* 顺时针 */
transform: rotate(30deg);
缩放scale
/* 宽*2，高*3 */
transform: scale(2,3);
倾斜skew
transform: skew(<angle> [,<angle>]);
矩阵matrix
以上四个都是基于matrix实现的，参考理解CSS3 transform中的Matrix(矩阵)
transform：matrix（cosθ，-sinθ,sinθ,cosθ,0,0)
设置旋转元素的基点位置transform-origin
/* 默认50% 50%，即中心点*/
transform-origin: 10% 20%;
3D转换
矩阵matrix3d，移动translate3d(x,y,z)，缩放scale3d(x,y,z)，旋转rotate3d(x,y,z,angle)
过渡
过渡transition
指定要添加效果的CSS属性和效果的持续时间
div {
transition: width 2s, height 2s, transform 2s;
}
div: hover {
with: 300px;
}
动画
创建动画@keyframes
@keyframes myfirst {
// from {background: red;}
// to {background: yellow;}
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;}
}
绑定动画，animation包含
- animation-name 动画名称
- animation-duration 周期(0)
- animation-timing-function 动画的速度曲线 ease（加速减慢）、linear（匀速）、ease-in（低速开始）、ease-out（低速减速）
- animation-delay 何时开始(0)
- animation-iteration-count 播放次数(1) infinite(无限)
- animation-direction 是否在下一周期逆向地播放 normal（否）、reverse、altermate、altermate-reverse
- animation-play-state 是否正在运行或暂停 running、paused
// 绑定“myfirst",并设定时间
div {
animation: myfirst 5s;
}
多列
- column 列宽和列数
- column-gap 列间距
- column-rule 类似border
- column-span 跨越多少列
用户界面
resize调整尺寸
- none
- both
- horizontal
- vertical
box-sizing方框大小调整
- content-box W3C标准规范的盒子模型
- border-box 元素的内边距和边框不再会增加它的宽度
- inherit 继承父元素
outline-offset外形修饰，类似border,但不占用空间
图片
滤镜filter,语法如下
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
按钮
背景颜色background-color，按钮大小font-size，圆角、边框、阴影
禁用按钮
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
