目录
- 1.过渡
- 2.动画
- 3.形状转换
- 4.选择器
- 5.阴影
- 6.边框
- 6.1 图片边框
- 6.2 边框圆角
- 7.背景
- 7.1 background-clip
- 7.2 background-origin
- 7.3 background-size
- 7.4 多张背景图
- 8.反射（倒影）
- 8.1 下倒影
- 8.2 右倒影（有偏移）
- 8.3 下倒影（渐变）
- 8.4 下倒影（图片遮罩）
- 9.文字
- 9.1 超出省略号
- 9.2 多行超出省略号
- 9.3 文字阴影
- 10.颜色
- 10.1 rgba
- 10.2 hsla
- 11.渐变
- 12.Filter（滤镜）
- 13.弹性布局: flex
- 14.栅格布局: grid
- 15.多列布局
- 16.盒模型定义
- 17.媒体查询
- 18.混合模式
- 18.1 background-blend-mode
- 18.2 mix-blend-mode
详细攻略
1.过渡
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
例子：
/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition: width, .5s, ease, .2s
/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/
transition: all, .5s
2.动画
animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
例子：
/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear;
/*2秒后开始执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear 2s;
/*无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画*/
animation: logo2-line 2s linear alternate infinite;
//还有一个重要属性：
animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。 */
3.形状转换
transform：适用于2D或3D转换的元素
transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)
transform:rotate(30deg);
transform:translate(30px,30px);
transform:scale(.8);
transform: skew(10deg,10deg);
transform:rotateX(180deg);
transform:rotateY(180deg);
transform:rotate3d(10,10,10,90deg);
4.选择器
想了解更多请参考：CSS 选择器参考手册
5.阴影
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;
div {
width:300px;
height:100px;
background:#09f;
box-shadow: 10px 10px 5px #888888;
}
6.边框
6.1 图片边框
border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;
div {
border: 15px solid transparent;
padding: 15px;
border-image: url(border.png);
border-image-slice: 30;
border-image-repeat: round;
border-image-outset: 0;
}
6.2 边框圆角
border-radius: n1,n2,n3,n4;
border-radius: n1,n2,n3,n4/n1,n2,n3,n4;
/n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。/
7.背景
7.1 background-clip
background-clip: 制定背景绘制（显示）区域，默认情况（从边框开始绘制）
从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！（background-clip: padding-box;）
只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！（background-clip: content-box;）
7.2 background-origin
background-origin: 背景开始位置（border-box | padding-box | content-box）
background-origin属性指定background-position属性应该是相对位置
div {
border:10px dashed black;
padding:35px;
background:url('logo.png') no-repeat,#ccc;
background-position:0px 0px;
}
background-origin不同的三种情况:
7.3 background-size
background-size: 制定背景的大小（contain | cover | repeat-x | center）
div {
border:1px dashed black;
padding:35px;
background:url('test.jpg') no-repeat;
}
7.4 多张背景图
在同一个区域内，使用多张背景图片
div {
border:1px dashed black;
padding:35px;
background-size: contain;
background:url('test.jpg') no-repeat left,url(logo.png) no-repeat right;
}
8.反射（倒影）
-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片
8.1 下倒影
.reflect-bottom-p {
padding-bottom: 300px;
}
.reflect-bottom {
-webkit-box-reflect: below;
}
8.2 右倒影（有偏移）
.reflect-right-translate {
-webkit-box-reflect: right 10px;
}
8.3 下倒影（渐变）
.reflect-bottom-mask {
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
}
8.4 下倒影（图片遮罩）
.reflect-bottom-img {
-webkit-box-reflect: below 0 url(shou.png);
}
9.文字
word-break: normal | break-all | keep-all;
word-wrap: normal | break-word;
9.1 超出省略号
text-overflow:ellipsis;
text-overflow: clip | ellipsis | string
9.2 多行超出省略号
现在css3提供了多行省略号的方法，遗憾就是这个暂时只支持webkit浏览器...
div {
width:400px;
margin:0 auto;
overflow : hidden;
border:1px solid #ccc;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
// 边框贴着难看，要撑开一点，就用下面这两句~
line-height:30px;
height:60px;
}
9.3 文字阴影
text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
text-shadow: 0 0 10px #f00;
10.颜色
这个其实就是css3提供了新的颜色表示方法。
10.1 rgba
rgb为颜色值，a为透明度
color: rgba(255,00,00,1);
background: rgba(00,00,00,.5);
10.2 hsla
h:色相”，“s：饱和度”，“l：亮度”，“a：透明度”
color: hsla( 112, 72%, 33%, 0.68);
background-color: hsla( 49, 65%, 60%, 0.68);
11.渐变
css3的渐变可以说是一大亮点，提供了线性渐变，径向渐变，圆锥渐变。
详细讲解参考链接：
CSS3 Gradient
再说CSS3渐变——线性渐变
再说CSS3渐变——径向渐变
神奇的 conic-gradient 圆锥渐变
12.Filter（滤镜）
css3的滤镜也是一个亮点，功能强大，写法也灵活。
原图
黑白色filter: grayscale(100%)
褐色filter:sepia(1)
饱和度saturate(2)
色相旋转hue-rotate(90deg)
反色filter:invert(1)
透明度opacity(.5)
亮度brightness(.5)
对比度contrast(2)
模糊blur(3px)
阴影drop-shadow(5px 5px 5px #000)
13.弹性布局: flex
Flex 布局教程：语法篇
Flex 布局教程：实例篇
14.栅格布局: grid
Grid布局指南
15.多列布局
这个属性，建议加私有前缀，兼容性有待提高。
div {
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-rule:2px solid #000;
-webkit-column-rule:2px solid #000;
-mox-column-rule:2px solid #000;
}
16.盒模型定义
box-sizing这个属性，网上说法是：属性允许您以特定的方式定义匹配某个区域的特定元素。
简单粗暴的理解就是：
- box-sizing: border-box的时候，边框和padding包含在元素的宽高之内。
- box-sizing: content-box的时候，边框和padding不包含在元素的宽高之内。
17.媒体查询
监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式。
// css
body {
background-color: pink;
}
@media screen and (max-width: 960px) {
body {
background-color: darkgoldenrod;
}
}
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
// html
重置浏览器窗口查看效果！
如果媒体类型屏幕的可视窗口宽度小于 960 px ，背景颜色将改变。
如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。
18.混合模式
就像photoshop里面的混合模式
css3的混合模式，两个（background-blend-mode和mix-blend-mode）。
这两个写法和显示效果都非常像。
区别就在于：
background-blend-mode 是用于同一个元素的背景图片和背景颜色的。
mix-blend-mode 用于一个元素的背景图片或者颜色和子元素的。
18.1 background-blend-mode
div{
width: 480px;
height: 300px;
background: url('test.jpg')no - repeat,#09f;
}
原图
multiply正片叠底
screen滤色
overlay叠加
darken变暗
lighten变亮
color-dodge颜色减淡模式
color-burn颜色加深
hard-light强光
soft-light柔光
difference差值
exclusion排除
hue色相
saturation饱和度
color颜色
luminosity亮度
18.2 mix-blend-mode
div{
padding: 20px;
width: 480px;
background: #09f;
}
原图
multiply正片叠底
screen滤色
overlay叠加
darken变暗
lighten变亮
color-dodge颜色减淡模式
color-burn颜色加深
hard-light强光
soft-light柔光
difference差值
exclusion排除
hue色相
saturation饱和度
color颜色
luminosity亮度
css3的新特性，就到这里了~
其中有一些新特性如果想使用的好，必须多去了解和练习。有些新特性，如果要单独详细的讲，比如动画，过渡，弹性盒子，渐变等。
参考资料：https://juejin.cn/post/6844903518520901639