CSS3新特性

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);

image.png

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 下倒影

<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom"></p>

.reflect-bottom-p {
    padding-bottom: 300px;
}      
.reflect-bottom {
    -webkit-box-reflect: below;
}

8.2 右倒影（有偏移）

<p><img src="test.jpg" class="reflect-right-translate"></p>

.reflect-right-translate {
    -webkit-box-reflect: right 10px;
}

8.3 下倒影（渐变）

<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom-mask"></p>

.reflect-bottom-mask {
    -webkit-box-reflect: below 0 linear-gradient(transparent, white);
}

8.4 下倒影（图片遮罩）

<p class="reflect-bottom-p"><img src="test.jpg" class="reflect-bottom-img"></p>

.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;
}

基础效果

美化后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的滤镜也是一个亮点，功能强大，写法也灵活。


<p>原图</p>
<img src="test.jpg" />
<p>黑白色filter: grayscale(100%)</p>
<img src="test.jpg" style="filter: grayscale(100%);"/>
<p>褐色filter:sepia(1)</p>
<img src="test.jpg" style="filter:sepia(1);"/>
<p>饱和度saturate(2)</p>
<img src="test.jpg" style="filter:saturate(2);"/>
<p>色相旋转hue-rotate(90deg)</p>
<img src="test.jpg" style="filter:hue-rotate(90deg);"/>
<p>反色filter:invert(1)</p>
<img src="test.jpg" style="filter:invert(1);"/>
<p>透明度opacity(.5)</p>
<img src="test.jpg" style="filter:opacity(.5);"/>
<p>亮度brightness(.5)</p>
<img src="test.jpg" style="filter:brightness(.5);"/>
<p>对比度contrast(2)</p>
<img src="test.jpg" style="filter:contrast(2);"/>
<p>模糊blur(3px)</p>
<img src="test.jpg" style="filter:blur(3px);"/>
<p>阴影drop-shadow(5px 5px 5px #000)</p>
<img src="test.jpg" style="filter: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
<h1>重置浏览器窗口查看效果！</h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 960 px ，背景颜色将改变。</p>
<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p>

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;
}

<p>原图</p>
<div></div>
<p>multiply正片叠底</p>
<div style="background-blend-mode: multiply;"></div>
<p>screen滤色</p>
<div style="background-blend-mode: screen;"></div>
<p>overlay叠加</p>
<div style="background-blend-mode: overlay;"></div>
<p>darken变暗</p>
<div style="background-blend-mode: darken;"></div>
<p>lighten变亮</p>
<div style="background-blend-mode: lighten;"></div>
<p>color-dodge颜色减淡模式</p>
<div style="background-blend-mode: color-dodge;"></div>
<p>color-burn颜色加深</p>
<div style="background-blend-mode: color-burn;"></div>
<p>hard-light强光</p>
<div style="background-blend-mode: hard-light;"></div>
<p>soft-light柔光</p>
<div style="background-blend-mode: soft-light;"></div>
<p>difference差值</p>
<div style="background-blend-mode: difference;"></div>
<p>exclusion排除</p>
<div style="background-blend-mode: exclusion;"></div>
<p>hue色相</p>
<div style="background-blend-mode: hue;"></div>
<p>saturation饱和度</p>
<div style="background-blend-mode: saturation;"></div>
<p>color颜色</p>
<div style="background-blend-mode: color;"></div>
<p>luminosity亮度</p>
<div style="background-blend-mode: luminosity;"></div>

18.2 mix-blend-mode

div{
  padding: 20px;
  width: 480px;
  background: #09f;
}

<p>原图</p>
<div><img src="test.jpg"/></div>
<p>multiply正片叠底</p>
<div><img src="test.jpg" style="mix-blend-mode: multiply;"/></div>
<p>screen滤色</p>
<div><img src="test.jpg" style="mix-blend-mode: screen;"/></div>
<p>overlay叠加</p>
<div><img src="test.jpg" style="mix-blend-mode: overlay;"/></div>
<p>darken变暗</p>
<div><img src="test.jpg" style="mix-blend-mode: darken;"/></div>
<p>lighten变亮</p>
<div><img src="test.jpg" style="mix-blend-mode: lighten;"/></div>
<p>color-dodge颜色减淡模式</p>
<div><img src="test.jpg" style="mix-blend-mode: color-dodge;"/></div>
<p>color-burn颜色加深</p>
<div><img src="test.jpg" style="mix-blend-mode: color-burn;"/></div>
<p>hard-light强光</p>
<div><img src="test.jpg" style="mix-blend-mode: hard-light;"/></div>
<p>soft-light柔光</p>
<div><img src="test.jpg" style="mix-blend-mode: soft-light;"/></div>
<p>difference差值</p>
<div><img src="test.jpg" style="mix-blend-mode: difference;"/></div>
<p>exclusion排除</p>
<div><img src="test.jpg" style="mix-blend-mode: exclusion;"/></div>
<p>hue色相</p>
<div><img src="test.jpg" style="mix-blend-mode: hue;"/></div>
<p>saturation饱和度</p>
<div><img src="test.jpg" style="mix-blend-mode: saturation;"/></div>
<p>color颜色</p>
<div><img src="test.jpg" style="mix-blend-mode: color;"/></div>
<p>luminosity亮度</p>
<div><img src="test.jpg" style="mix-blend-mode: luminosity;"/></div>

css3的新特性，就到这里了~
其中有一些新特性如果想使用的好，必须多去了解和练习。有些新特性，如果要单独详细的讲，比如动画，过渡，弹性盒子，渐变等。

参考资料：https://juejin.cn/post/6844903518520901639

最后编辑于：2020.12.18 09:19:34

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,948评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,371评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,490评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,521评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,627评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,842评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,997评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,741评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,203评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,534评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,673评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,339评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,955评论 3赞 313
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,770评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,000评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,394评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,562评论 2赞 349

CSS3新特性

CSS3新特性

目录

详细攻略

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

推荐阅读更多精彩内容