css - css3

{
	width: calc(100% + 20px);
	width: calc(1000px / 20);
	width: calc(50 * 20px);
	/*+和-左右都要空格, 且都要有单位; /前和*后要有单位*/

	text-transform: uppercase;
	/*
	大写
	lowercase, 小写
	capitalize, 首字母大写
	*/

	background-clip: border-box;
	/*
	裁剪到边框, 包括边框, 默认值
		padding-box; 裁剪到内边距, 包括内边距
		content-box; 裁剪内容区域
	*/

	text-shadow: 1px 2px 3px rgba(0, 0, 0, .5);
	/*文本阴影: 偏移x y 模糊度 颜色*/

	box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 1),
				inset -1px -1px 1px rgba(0, 0, 0, 1);
	/*盒阴影: inset向内模糊 默认向外, 逗号隔开不同的阴影效果*/

	background: -webkit-linear-gradient(left, red 20%, blue, transparent 40%);
	background: -webkit-linear-gradient(left, red, blue);
	background: -webkit-radial-gradient(center, #F00, #00F);
	/*
	渐变: (起点位置, 起点颜色 [, 结束颜色] [段点1位置(20%)], [起始颜色] [, 结束颜色] [段点2位置(40%)]...);
	-webkit-; -moz-; -ms-
	*/

	-webkit-box-reflect: below 0 -webkit-linear-gradient(bottom, #000, transparent 20px);
	/*
	倒影: 倒影方向 偏移 [倒影渐变]
	Firefox和IE不支持
	*/

	transition: all .5s linear 100ms;
	transition-property: opacity;
	transition-duration: .5s;
	transition-timing-function: linear;
	transition-delay: 100ms;
	/*
	过度: 过度属性 过度时间 过度方式 延长时间, 逗号隔开不同属性的过度
	过度属性(property): 如 width, top, transform;
	过度时间(duration): 单位s或ms;
	过度方式(timing-function)
		线性过度: linear 匀速, ease 慢-快-慢, ease-in 加速, ease-out 减速, ease-in-out 慢>快>慢;
		自定义线性过度: cubic-bezier(t1, s1, t3, s3);
			参考链接: http://cubic-bezier.com/

		断点过度: steps(number, start或end);
			number 周期间隔数
			start 第一帧为0%结束状态
			end 第一帧为0%开始状态
	-webkit-
	*/

	animation: a_shadow 10s linear 1s infinite alternate forwards;
	/*
	动画: a_shadow 10s一个周期 过度方式 延迟1s后开始 无限循环周期 轮流反向 保持结束状态
	-webkit-
	*/

	transform: translate(1px, 1px) rotate(360deg, 0) scale(.5, 1.5) skew(1deg, 1deg);
	transform-origin: x y;
	/*
	2d变换: 偏移 旋转 缩放 扭曲;
	变换中心
	-webkit-
	*/

	transform-style: preserve-3d;
	/*声明3d视图*/
	perspective: 500px;
	/*透视距离, 效果为 perspective 的值减去translateZ的值*/
	transform: translateZ(100px);
	/*动画自身或容器相对屏幕, 向里(-效果变小)或向外(+效果变大)的距离*/
	perspective-origin: 50% 50%;
	/*透视中心*/
	backface-visibility: hidden;
	/*
	只有距离效果, 没有透视效果
	层叠的两个opacity, 在执行过渡或动画时, 应该在背后一层添加
	*/

	box-sizing: border-box;
	/*
	让padding和border不占空间
	默认 content-box;
	*/
}

@keyframes a_shadow {
	30% { /*3s放大*/
		transform: scale(2);
	}
	70%, 90% { /*4s向下, 2s停留*/
		transform: translate3d(0, 10px, 0) scale(2);
	}
	100% { /*1s缩小*/
		transform: translate3d(0, 10px, 0) scale(1);
	}
}

/*自定义字体*/
@font-face {
	font-family: 'myFont';
	src: url('font/myFont.eot');
	src: url('font/myFont.woff') format('woff'),
		 url('font/myFont.woff.ttf') format('truetype');

	font-style: normal;
	font-weight: normal;
}

/*链接或绑定点击事件的元素高亮颜色 (iOS*/
a {
	-webkit-tap-highlight-color: transparent;
}

input {
	-webkit-appearance: none;
	border-radius: none;
	/*禁用默认按钮的样式 (iOS*/

	-webkit-user-modify: read-write-plaintext-only;
	/*只允许输入文本内容 (-webkit-*/
}
/*改变placeholder颜色 (-webkit-*/
input::-webkit-input-placeholder {
	color: gray;
}

/*让内嵌滚动条顺畅滑动, 影响性能避免整屏内嵌 (iOS*/
div {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/*文字渐变 (-webkit-*/
div {
	width: 100px;
	background: -webkit-linear-gradient(left, red, blue);
	-webkit-background-clip: text;
	color: transparent;
}

/*文字镂空 (-webkit-*/
div {
	font-size: 2em;
	-webkit-text-stroke: 1px #000;
	color: transparent;
}

p {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/*单行超出省略*/

	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	/*多行超出省略, 设置高度避免兼容问题*/
}

/*蒙版 (-webkit-*/
div {
	height: 100px;
	background: url(1.jpg);
	background-size: 100% auto;

	-webkit-mask: -webkit-linear-gradient(left, #000, transparent 20%, transparent 80%, #000);
	/*渐变做蒙版*/

	-webkit-mask-image: url(1.png);
	/*图片做蒙版*/

	-webkit-mask-position: left top;
	/*定位蒙版*/

	-webkit-mask-origin: padding;
	/*从包括border的位置开始定位*/

	-webkit-mask-size: cover;
	/*拉伸蒙版*/

	-webkit-mask-repeat: no-repeat;
	/*蒙版不重复*/

	-webkit-mask-clip: padding;
	/*蒙版延伸到包括border的区域*/
		
	-webkit-mask-composite: xor;
	/*多张蒙版的重叠顺序*/
}

/*滤镜 (-webkit-*/
div {
	height: 100px;
	background: url(1.jpg);

	-webkit-filter: brightness(1);
	/*(0, 1)变暗, (1, )高亮*/

	-webkit-filter: blur(1px);
	/*(0, )模糊*/

	-webkit-filter: contrast(2);
	/*(0, 1)对比度小于原图, (1, )对比度大于原图*/

	-webkit-filter: saturate(2);
	/*(0, 1)饱和度小于原图, (1, )饱和度大于原图*/
		
	-webkit-filter: invert(1);
	/*(0, 1)反色*/

	-webkit-filter: sepia(1);
	/*(0, 1)叠加褐色*/

	-webkit-filter: hue-rotate(180deg);
	/*(0deg, 360deg)叠加色环中指定颜色*/
}