设计创作中，如何高效的对信息进行整合、梳理？对此，本文分享了对Confluence 的产品体验设计拆解，从日常使用场景、体验亮点、体验槽点三个方面分析并总结了文档类产品的解题宝典，一起来看看吧。

一、前言

Confluence 是一个由 Atlassian 公司所开发的专业的企业知识管理与协同软件，可以用于构建企业 Wiki。它能够帮助团队成员之间共享信息、文档协作、集体讨论，信息推送等。

如何高效地对信息进行整合、梳理， 是设计创作很重要的一环。基于此，这里给大家分享一下 Confluence 的产品体验设计拆解。通过对 Confluence 的体验设计拆解，为你提供一份文档类产品的解题宝典！

Ps：笔者之前写文章主要是使用语雀或 Notion，这次为了拆解「Confluence」，就专门用 Confluence 写文章来拆解 Confluence ～（套娃警告 ）

1. 事先声明

• 强烈建议使用电脑查看，用户体验更佳；
• 为了让设计细节更容易被看到，用 Gif 来呈展示；
• Gif 体积较大，请耐心查看。

2. 适合人群

第一类，UI/UX设计师，可以跳出执行层，去思考 Confluence 的产品设计策略，提升产品分析能力；第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；第三类，文档产品从业者，通过全面的产品设计策略推导、用户需求分析，获取竞品分析参考。

二、日常使用场景

1. Confluence 基础概念

首先了解一下这几个 Confluence 中的基本概念，页面都是以树状结构放置与空间之中，页面之间也可以互相链接和访问。创建页面时除了采用空白文档，也可以选择模板。权限控制分了 3 个维度，分别是团队、个人和匿名用户，按照权限最小化原则，分空间和分页面管理。

2. 页面模板

点击「+」号新建页面后，这里并没有像飞书一样把推荐使用哪些模板作为一个弹窗打断用户，而是直接进入到新页面的编辑流程，光标聚焦到标题，整个过程更加自然。给用户的预期还是直接新建页面，当用户在右侧浏览到有很多丰富的模板时，如果有需求便会主动地去触发使用。

Confluence Cloud 附带了 100+个模板，覆盖了非常多的主题，如人力资源、软件开发、团队合作、项目规划等。这些模板帮助能够用户制作精美有效的页面内容。并且模板预览的交互也非常轻量，不需要再次跳转或者打开弹窗去中断用户的操作行为，而是直接鼠标悬停便能预览模板的详情。

3. 读写分离

关于读写分离，看起来是和语雀类似的，把读和写区分为两种场景。语雀考虑的更多的是希望对作者来说，他的写能够在一种平静又沉浸的一个创作环境中，他能够无所顾虑的写。而读者他能够放心的去阅读。然后在这两个体验之间，用一个“发布/更新”的动作来实现连接。这个发布让作者更加有仪式感，这个动作告诉作者，你的内容将交给读者，由读者来阅读。

而 Confluence 的考虑更多的应该是基于团队协同的办公场景。期望团队中被大家看到的的文档也应该是一个相对稳定或者是被审阅过后的版本，即通过「发布」这个行为来进行确认。

在编辑页面时，进行的更改会自动保存并同步，以便编辑这个页面的所有人都能看到。不过，只有在您发布后，查看页面的人才会看到这些更改。您每次发布更改时，Confluence 会启动页面的一个新版本，并将它存储在版本历史记录中。这样，用户可以跟踪不同时间的更改，并在需要时轻松恢复到以前的版本。

4. 插入区块

Confluence 支持非常可插入的区块，点击「+」或者输入「/」，通过下拉菜单可以展示一些常用的区块，在「查看更多」内，可以显示所有支持插入的区块，并且还有一个专门的应用市场可以去安装更多的应用，例如可以安装 Mind Maps ，在 Confluence 中就可以直接绘制思维导图。

5. 草稿和已发布页面

基于读写分离的设计理念。Confluence 也区分草稿和已发布的页面。创建了新页面后，在未发布之前它会以草稿形式存在，直到发布为止。草稿不会出现在其他成员的页面树、动态订阅源或搜索结果中（一经发布，页面便会出现在所有这些位置，除非它带有加密的标识）。发布、关闭、更多组成了一个按钮组，在「更多」内也可以对进行其他的发布操作，例如发布但不通知关注者、安排发布的时间等。

6. 页面权限

每个页面都可以设置单独的页面权限，例如允许任何人都可以查看和编辑、只有某些人可以查看或编辑等。整体权限配置的交互操作也是比较符合由大到小的权限配置原则，先配置总的三大权限类型，再在小的权限类型中可以细化，例如邀请不同的人，给予不同的查看或编辑权限。

三、体验亮点

1. 顶部工具栏

Confluence 的顶部工具栏和右侧的发布、查找、协同功能是放在同一行功能区域里，同时也可以看到并没有把太多的工具都平铺出来，而是把一些相对常用的工具平铺出来，不常用的工具则隐藏到「更多」里。相对腾讯文档、语雀、石墨这类型的产品，顶部能够节省一行空间，在保留工具栏常显的基础上，整体显得更加简洁。

2. 图片缩放栅格

图片的缩放不像常见的文档工具那样随意缩放，容易缩放出各种大小不一的图片，Confluence 的图片缩放会基于特定的栅格参考线，鼠标在参考线的附近释放会自动吸附，并缩放至相应的大小，这样就能够在一定程度上限制整篇文档的图片大小的种类，使图片的排版也更加精美。

3. 页面层级省略

左上角的面包屑层级不易默认显示全部出来，而是会默认将中间省略，优先显示第一个和最后一个层级节点。这个细节可以体现在产品设计的策略，并不会一股脑的把所有信息都展示给用户，而是优先展示相对重要的信息，隐藏会省略此药的信息，当用户想要关注的时候，也能够很方便的进行触发。

4. 添加表情符号

鼠标悬停至 Confluence 的标题出，会显示可以添加表情符号。通过适时隐藏的方式，当鼠标经过时才出现，避免常驻显示给用户带来的干扰。内置了很多表情，团队内部可以确认表情使用的规则，便可以帮助用户更快速地对文档的类型做出识别和判断。

5. 页面状态

Confluence 支持给页面添加自定义的状态，例如计划中、草稿、正在进行、随时可以查看等，同时状态的设置除了基本的文本外，还支持用户自定义状态的颜色，让其他成员在阅读文档的时候，可以很直观地了解到当前这篇文档的状态，便于团队协同和管理。

6. 表格标题行自动固定

?

Confluence 的表格支持设置标题行，当页面滚动至表头不在正常可视范围时，会自动将表头进行固定悬浮，让用户能够看清楚下面的内容和标题的对应关系，体验非常自然顺畅。除了设置标题行，也支持设置编号列，同理也是可以在横向滚动表格的时候，能够便捷的浏览对应的编号。

7. 表格单元格的设置

在表格中框选单元格后，会在右上角出现对于单元格的更多操作设置，例如设置单元格背景色、合并/拆分单元格等。将这些对于单元格的设置直接外露出来，其他的一些文档工具有的是需要右键才触发，略显隐蔽，有的虽然也是浮动工具栏的形式，但是框选文本和框选单元格的触发区分不明确，操作体验上欠佳。Confluence 中这种表格交互的方式很好的解决了一些表格中的交互问题，使用体验上也非常流畅。

8. 灵活的分栏设置

Confluence 中的分栏设置也是内置了几种固定的栏数和布局百分比，基本上能够兼容绝大部分场景，同时做出限制也能够让整体页面的分栏效果不会因为参差不齐而显得凌乱。调节的方式也非常便捷，所有关于区块的调整方式都是位于区块的下方调整。

9. 自动保存提示

目前市面上主流的在线文档工具绝大部份都是实时保存的，不过难免会有一些用户会有数据丢失的焦虑。为解决这种用户焦虑，Confluence 会在页面的顶部出现保存的状态提示，告知用户刚刚编辑的数据正在保存、已保存等，避免用户担心编辑的内容没有保存而引发的焦虑情况。

10. 无障碍设计

关于无障碍设计的一个小亮点，对于因视觉障碍而使用屏幕朗读起的用户，如果遇到图片，便无法被朗读器识别，这个时候就可以使用替代文本的功能，当朗读器朗读到某张图片时，可以将图片转化为编辑者所设置好的替代文本，这样就能够通过替代文本的方式帮助有视觉障碍的用户理解内容。

四、体验槽点

1. 归档弹窗按钮错位

在点击页面归档时弹出来的弹窗，发现右上角的「关闭」错位到弹窗外部了，一个非常明显的线上 BUG 。

2. 区块拖动没有交互反馈

一部分区块在拖拽的时候，只会讲区块的名称带上，缺少即将移动到的目标位置的交互反馈。

3. 一些视觉样式不统一

创建空间的时候，可以发现创建空间的弹窗与外面的其他页面的视觉样式差异很多，明显看起来就不是一套设计样式。推测是因为有比较久远的历史设计债务问题，导致目前整体产品内存在一些页面的视觉样式格格不入。

4. 页面目录

在体验 Confluence 的过程中，不知道是不是因为笔者没有找到功能的原因，发现 Confluence 没有国内一些文档工具都有的目录锚点功能（如果大家有发现的话，可以告诉我 ），虽然可以通过插入目录索引来实现，但是这个目录只是实现一个跳转，并不能将目录固定在页面的左侧或右侧显示。并且这个目录只能在页面的查看态才能看到，在编辑态的时候无法预览目录，导致在整理这篇文章的时候，经常要上下滚动翻看，略显麻烦。

五、总结

总体来讲，Confluence 是非常强大的团队知识管理工具，它覆盖了非常全面的团队协同场景，国内很多文档产品的设计都会借鉴 Confluence 中的一些设计策略和设计理念。本文只是依据日常使用场景测试出的一些小模块，功能体验也还有非常多的可取之处。

由于时间和篇幅有限，本文关于 Confluence 的设计拆解中存在的疏误之处还望大家给与指正，欢迎大家一起学习和讨论。

参考链接：

https://www.woshipm.com/pd/4836001.html

https://z?huanlan.zhihu.com/p/105877523

作者：波波 Bobby He ；深耕 B端体验设计，持续学习输出中。

本文由 @波波Bobby He 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

天总结的是CSS3的学习内容

一、CSS简介

CSS3是CSS技术的升级版本，CSS即层叠样式表(Cascading StyleSheet)。CSS3语言是朝着模块化发展的，把它分解成小的模块，并且加入 更多新的模块进来：

                    盒子模型
                    文字特效
                    边框圆角
                    动画
                    多列布局
                    用户界面
                    旋转
                    渐变
                    ...

二、CSS3的应用

2.1.超级选择器

CSS选择器：使用CSS对html页面中的元素实现一对一，一对多或者多对一的控制：

选择器
{
    样式
}

1.属性选择器

在CSS3中追加了三个选择器:[att*=val];[att^=val];[att$=val]–>att表示为属性，val表示为属性的属性值。

[att*=val]:如果元素用att表示的属性的值中包含val指定的字符，那么该元素使用这个样式。

[att$=val]:如果元素用att表示的属性的属性值的结尾字符用val指定的字符，那么该元素使用这个样式。

[att^=val]:如果元素用att表示的属性的属性值的开头字符为用val指定的字符，那么该元素使用这个样式。

注意： /如果纯用数字的时候该样式不会显示成功，需要用\连接与数字最近的符号 注意！只有’-‘的字符需要加’\’/

<head>
    <meta charset="UTF-8">
    <title>css3中的属性选择器</title>
    <style>
        /*1.[att*=val] 此时只有id=section1A的div会拥有该样式*/
        [id*=section1]{
            background-color: blueviolet;
        }
        /*2.[att^=val] 此时只有id=footer的div会拥有该样式*/
        [id^=f]{
            background-color: blue;
        }
        /*3.[att$=val] 此时只有id=sectionB的div会拥有该样式*/
         [id$=B]{
            background-color: chartreuse;
        }
        /*注意！*/
        [id$=\-1]{
            background-color: crimson;
        }
    </style>
</head>
<body>
    <h1>CSS3中的属性选择器</h1>
    <div id="section1A">section1A</div>
    <div id="sectionB">sectionB</div>
    <div id="section2-1">section2-1</div>
    <div id="footer">footer</div>
</body>

2.结构性伪类选择器
(1)类选择器
使用类选择器把相同的元素定义成不同的样式，伪类选择器是已经定义好的不可以随便起名。

p.right{
    color:red;
}
p.left{
    colot:blue;
}

(2)伪类选择器—-最常见的伪类选择器：a（使用顺序为：未，已，悬，停）

        a:link{
            color: #ff6600;
        }
        a:visited{
            color: blueviolet;
        }
        a:hover{
            color: aqua;
        }
        /*鼠标点击时*/
        a:active{
            color: darkblue;
        }

(3)伪元素选择器
针对于CSS中已经定义好的伪元素使用的选择器(first-line;first-letter;before;after)。

选择器:伪元素{
    属性:值;
}
选择器.类名:伪元素{
    属性:值;
}

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取

first-line伪元素选择器：向某个元素中的第一行文字使用样式。

first-letter伪类选择器：向某个元素中的文字的首字母或者第一个文字使用样式。

before：在某个元素之前插入一些内容。

after：在某个元素之后插入一些内容。

可以使用before和after伪元素在页面中插入文字，图像，项目编号等。

插入文字：E:before/after

排除一些不需要插入内容的元素：E:none：before/after

插入图像

插入项目编号

a.在多个标题前加上编号：counter属性对项目追加编号

            元素:before{
                content:counter(计数器);
            }
            元素{
                counter-increment:content属性值中所指定的计数器名称；
            }

    b.对编号中添加文字
    c.指定编号的样式
    d.指定编号的种类：list-style-type
    e.编号嵌套，重置编号
        要对哪一个元素进行重置，那么就在该元素的父元素上进行设置reset。
    f.中编号中嵌入大编号

        h2:before{
            content:counter(大编号计数器)'-'conter(中编号计数器);

    g.在字符串两边嵌套文字符号:open-quoter&close-quoter

<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
         p:first-line{
            color: blueviolet;
        }
        p:first-letter{
            color: aqua;
        }
        li:before{
            content: "~~~";
            color: #000;
        }
        li:after{
            content: "~~~";
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>CSS中主要有四个伪类选择器</h1>
    <p>
        CSS中主要有四个伪类选择器<br />
        first-line伪元素选择器：向某个元素中的第一行文字使用样式
    </p>
    <p>
        first-letter伪类选择器：向某个元素中的文字的首字母或者第一个文字使用样式
    </p>
    <h4>befor&after</h4>
    <ul>
        <li><a href="first.html">balabala</a></li>
    </ul>   
</body>

(4)结构性伪类选择器

• root选择器：将样式绑定到页面的根元素中。
• not选择器：只对某个结构元素使用样式，但该元素下面的子结构元素不使用该样式。
• empty选择器：指定当元素中内容为空白时显示的样式。

<head>
    <style>
    /*empty选择器*/
        :empty{
            background-color: darkviolet;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td></td>
        </tr>
    </table>
 </body>

<head>
    <style>
        /*target选择器*/
        :target{
            background-color: blanchedalmond;
            color: brown;
        }
    </style>
</head>
<body>
    <h2>target选择器</h2>
    <a href="#A">A</a>
    <a href="#B">B</a>
    <div id="A">
        <h2>A标题</h2>
        <p>内容</p>
    </div>
    <div id="B">
        <h2>B标题</h2>
        <p>内容</p>
    </div>
</body>

first-child：单独指定第一个子元素的样式。

last-child：单独指定最后一个子元素的样式。

nth-child：选择器匹配正数下来的第N个子元素，nth-child(odd)为第奇数个子元素，nth-child(even)为第偶数个子元素。

nth-last-child(n)：匹配倒数数下来第n个子元素。

nth-of-type：正数，当指定元素为标题加内容的时候，如果使用上面的方法会导致真正的指定元素不被成功指定，因此需要使用nth-first-type方法进行指定。

nth-last-type：倒数，同nth-first-type。

循环使用样式：nth-child(An+B)–A 表示每次循环中共包括几种样式，B表示指定的样式在循环中所处的位置。

only-child：只对一个元素起作用。

<head>
    <meta charset="UTF-8">
    <title>结构性伪类选择器</title>
    <style>
        /* 选择器first-child；last-child；nth-child;nth-last-child*/
        li:first-child{
            background-color: darkviolet;
        }
        li:last-child{
            background-color: chartreuse;
        }
        li:nth-child(3){
            background-color: cadetblue;
        }
        li:nth-child(odd){
            background-color: aquamarine;
        }
        li:nth-child(even){
            background-color: cornflowerblue;
        }
        li:nth-last-child(3){
            background-color: darkgrey;
        }
        /*循环*/
        li:nth-child(4n+1){
            background-color: aquamarine;
        }
        li:nth-child(4n+2){
            background-color: indianred;
        }
        /*唯一的*/
        li:only-child{
            background-color: hotpink;
        }
        /*存在的问题*/
        h2:nth-child(2){
            background-color: darkgoldenrod;
        }
        h2:nth-child(odd){
             background-color: darkgoldenrod;
        }
        h2:nth-child(even){
            background-color: darkgoldenrod;
        }
        h2:nth-of-type(odd){
            background-color: chartreuse;
        }
        h2:nth-of-type(even){
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1>选择器first-child；last-child；nth-child;nth-last-child</h1>
    <ul>
        <li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
        <li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
        <li>No.9</li><li>No.10</li>
        <li>No.11</li><li>No.12</li>
    </ul>
    <h1>唯一的</h1>
    <ul>
        <li>唯一,多加一个就没有啦</li>
    </ul>
    <div id="A">
        <h2>A标题</h2><p>内容</p>
        <h2>B标题</h2><p>内容</p>
    </div>
</body>

3.UI元素状态伪类选择器
指定的样式只有在元素处于某种状态下才起作用，在默认状态下不起作用！

选择器:伪元素{
    属性:值;
}
选择器.类名:伪元素{
    属性:值;
}

first-line伪元素选择器：向某个元素中的第一行文字使用样式。

first-letter伪类选择器：向某个元素中的文字的首字母或者第一个文字使用样式。

before：在某个元素之前插入一些内容。

after：在某个元素之后插入一些内容。

可以使用before和after伪元素在页面中插入文字，图像，项目编号等。

插入文字：E:before/after

排除一些不需要插入内容的元素：E:none：before/after

插入图像

插入项目编号

a.在多个标题前加上编号：counter属性对项目追加编号

            元素:before{
                content:counter(计数器);
            }
            元素{
                counter-increment:content属性值中所指定的计数器名称；
            }

    b.对编号中添加文字
    c.指定编号的样式
    d.指定编号的种类：list-style-type
    e.编号嵌套，重置编号
        要对哪一个元素进行重置，那么就在该元素的父元素上进行设置reset。
    f.中编号中嵌入大编号

        h2:before{
            content:counter(大编号计数器)'-'conter(中编号计数器);

       g.在字符串两边嵌套文字符号:open-quoter&close-quoter   

<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
         p:first-line{
            color: blueviolet;
        }
        p:first-letter{
            color: aqua;
        }
        li:before{
            content: "~~~";
            color: #000;
        }
        li:after{
            content: "~~~";
            color: darkred;
        }
    </style>
</head>
<body>
    <h1>CSS中主要有四个伪类选择器</h1>
    <p>
        CSS中主要有四个伪类选择器<br />
        first-line伪元素选择器：向某个元素中的第一行文字使用样式
    </p>
    <p>
        first-letter伪类选择器：向某个元素中的文字的首字母或者第一个文字使用样式
    </p>
    <h4>befor&after</h4>
    <ul>
        <li><a href="first.html">balabala</a></li>
    </ul>   
</body>

(4)结构性伪类选择器

• root选择器：将样式绑定到页面的根元素中。
• not选择器：只对某个结构元素使用样式，但该元素下面的子结构元素不使用该样式。
• empty选择器：指定当元素中内容为空白时显示的样式。

<head>
    <style>
    /*empty选择器*/
        :empty{
            background-color: darkviolet;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td></td>
        </tr>
    </table>
 </body>

<head>
    <style>
        /*target选择器*/
        :target{
            background-color: blanchedalmond;
            color: brown;
        }
    </style>
</head>
<body>
    <h2>target选择器</h2>
    <a href="#A">A</a>
    <a href="#B">B</a>
    <div id="A">
        <h2>A标题</h2>
        <p>内容</p>
    </div>
    <div id="B">
        <h2>B标题</h2>
        <p>内容</p>
    </div>
</body>

first-child：单独指定第一个子元素的样式。

last-child：单独指定最后一个子元素的样式。

nth-child：选择器匹配正数下来的第N个子元素，nth-child(odd)为第奇数个子元素，nth-child(even)为第偶数个子元素。

nth-last-child(n)：匹配倒数数下来第n个子元素。

nth-of-type：正数，当指定元素为标题加内容的时候，如果使用上面的方法会导致真正的指定元素不被成功指定，因此需要使用nth-first-type方法进行指定。

nth-last-type：倒数，同nth-first-type。

循环使用样式：nth-child(An+B)–A 表示每次循环中共包括几种样式，B表示指定的样式在循环中所处的位置。

only-child：只对一个元素起作用。

<head>
    <meta charset="UTF-8">
    <title>结构性伪类选择器</title>
    <style>
        /* 选择器first-child；last-child；nth-child;nth-last-child*/
        li:first-child{
            background-color: darkviolet;
        }
        li:last-child{
            background-color: chartreuse;
        }
        li:nth-child(3){
            background-color: cadetblue;
        }
        li:nth-child(odd){
            background-color: aquamarine;
        }
        li:nth-child(even){
            background-color: cornflowerblue;
        }
        li:nth-last-child(3){
            background-color: darkgrey;
        }
        /*循环*/
        li:nth-child(4n+1){
            background-color: aquamarine;
        }
        li:nth-child(4n+2){
            background-color: indianred;
        }
        /*唯一的*/
        li:only-child{
            background-color: hotpink;
        }
        /*存在的问题*/
        h2:nth-child(2){
            background-color: darkgoldenrod;
        }
        h2:nth-child(odd){
             background-color: darkgoldenrod;
        }
        h2:nth-child(even){
            background-color: darkgoldenrod;
        }
        h2:nth-of-type(odd){
            background-color: chartreuse;
        }
        h2:nth-of-type(even){
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1>选择器first-child；last-child；nth-child;nth-last-child</h1>
    <ul>
        <li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li>
        <li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li>
        <li>No.9</li><li>No.10</li>
        <li>No.11</li><li>No.12</li>
    </ul>
    <h1>唯一的</h1>
    <ul>
        <li>唯一,多加一个就没有啦</li>
    </ul>
    <div id="A">
        <h2>A标题</h2><p>内容</p>
        <h2>B标题</h2><p>内容</p>
    </div>
</body>

3.UI元素状态伪类选择器
指定的样式只有在元素处于某种状态下才起作用，在默认状态下不起作用！

4.兄弟元素选择器
用来指定位于同一父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。一定要是之后的兄弟元素！

<子元素>~<子元素之后的同级兄弟元素>
    {
        样式
    }

2.2.文字阴影与自动换行

1.text-shadow

p{
    text-shadow：length(阴影离开文字的横方向距离) length(阴影离开文字的纵方向距离) length(阴影模糊半径) color(阴影颜色)
}

位移距离：前两个参数代表的阴影离开文字的横(纵)方向距离，不可省略。

第三个参数代表模糊半径，代表阴影向外模糊时候的范围，数值越大越模糊。

当没有指定颜色值时，会使用默认文字的颜色。

指定多个阴影，并且可以针对每个阴影用逗号分隔。

2.word-break：浏览器文本自动换行。

3.word-wrap： 长单词与URL地址自动换行。

4.服务器端字体和@font-face属性

定义斜体或粗体：在定义字体的时候，可以把字体定义成斜体或者粗体，在使用服务器服务器端字体的时候，需要根据斜体还是粗体使用不同的汉字。

显示客户端字体：首先将font-family设置为本地的字体名，然后将src属性设置为local(‘字体’)。

font-variant：设置文本是否大小写。

font-weight：设置文本的粗细。

font-stretch：设置文本是否横向的拉伸变形。

2.3.盒模型

1.各种盒模型

inline-block类型

使用inline-block类型来执行分列显示

<head>
    <style>
    div.div1{
            background-color: #ff6600;
            width: 300px;
            height: 150px;
            float: left;
        }
        div.div2{
            background-color: #21fffc;
            width: 200px;
            height: 100px;
            float: left;
        }
        div.div3{
            background-color: #ef23ff;
            width: 500px;
            height: 100px;
            clear: both;
        }
        /*inline-block*/
        div.div4{
            background-color: #ff6600;
            display: inline-block;
            width: 300px;
        }
        div.div5{
            background-color: #21fffc;
            vertical-align: top;
            display: inline-block;
            width: 200px;
        }
        div.div6{
            background-color: #ef23ff;
            width: 500px;
            height: 100px;
        }
      </style>
</head>
<body>
    <h1>使用inline-block类型来执行分列显示-1.传统方式</h1>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <hr color="darkred">
    <h1>使用inline-block类型来执行分列显示-1.inline-block方式</h1>
    <div class="div4">
        div1div1div1div1div1div1div1
        div1div1div1div1div1div1div1div1
        div1div1div1div1div1div1div1div1
    </div><div class="div5">
        div2div2div2div2div2div2div2
        div2div2div2div2div2div2div2div2
    </div>
    <div class="div6">
        div3
    </div>  
</body>

使用inline-block类型来显示水平菜单

<head>
    <style>
        ul.ul1 li{
            float: left;
            list-style: none;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
        ul.ul2 li{
            list-style: none;
            display: inline-block;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
    </style>
</head>
<body>
    <h1>使用inline-block类型来显示水平菜单-inline-block</h1>
    <ul class="ul2">
        <li>A</li><li>B</li><li>C</li><li>D</li>
    </ul>
</body>

使用inline-block类型来显示水平菜单

<head>
    <style>
        ul.ul1 li{
            float: left;
            list-style: none;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
        ul.ul2 li{
            list-style: none;
            display: inline-block;
            padding:5px 20px;
            text-align: center;
            border-right: 1px solid darkviolet;
            width: 200px;
            color: wheat;
            background-color: mediumvioletred;
        }
    </style>
</head>
<body>
    <h1>使用inline-block类型来显示水平菜单-inline-block</h1>
    <ul class="ul2">
        <li>A</li><li>B</li><li>C</li><li>D</li>
    </ul>
</body>

<head>
    <style>
        table{
           display: inline-table;
           vertical-align: bottom;
           border: 2px solid blueviolet;
           width: 400px;
           height: 200px;
           color: darkviolet;
       }
        td{
            border: 2px solid violet;
        }
    </style>
</head>
<body>
    <h1>使用inline-table类型-一个表格前后都有文字将其环绕</h1>
    巴拉巴拉
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
    巴拉巴拉
</body>

list-item类型

可以将多个元素作为列表显示，同时在元素的开头加上列表的标记。

run-in类型和compact类型

none类型

当元素被指定none后，该元素不会显示

2.显示不下的内容

overflow属性：指定对盒子中容纳不下的内容的显示办法

overflow-x属性与overflow-y属性

textoverflow：在盒子的末尾显示代表省略符号的‘…’，但是该属性只在内容在水平位置上超出时显示。

3.盒子阴影

box-shadow:让盒在显示的时候产生阴影的效果

对盒内子元素设置阴影

对一个文字或第一行设置阴影：通过first-line或者first-letter

对表格和对单元格使用阴影

4.box-sizing宽高计算

指定针对元素的宽度和高度的计算方法

    (content)border-box:属性值表示元素的宽高度(不)包括内补白区域及边框的宽度高度

<head>
    <style>
        div.a,div.b{
            width: 300px;
            padding: 30px;
            margin: 20px auto;
            border: 30px solid darkviolet;
            background-color: violet;
        }
        div.a{
            box-sizing: border-box;
        }
        div.b{
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <h2>box-sizing：content&border-box</h2>
    <div class="ab">
        <div class="a">
            box-sizing：border-box代表宽度和高度包含内补白宽度高度，即虽然有padding和border，最终仍然为300px
        </div>
        <div class="b">
            box-sizing：content-box:代表不包含宽高度内补白区域，即最后为300px+30px+30px
        </div>
    </div>
</body>

2.4.边框和背景样式

1.新增的背景属性

background-clip:指定背景的显示范围

border-box：从边框开始

padding-box：从内边框开始

content-box：从内容开始

background-orgin:指定绘制背景图像的起点

可以指定绘制时的起始位置，默认为padding，可以为border或者content左上角开始绘制。

background-size:指定背景中图像的尺寸

auto

length

percentage：以父元素的百分比设置背景图像的宽高度。

cover：全覆盖。

contain ：与cover相反，主要将背景图片缩小，来适合布满整个容器。

2.显示多个背景属性： 第一个图像在最上面

3.圆角边框：border-radius

指定两个半径：左上右下+左下右上

当不显示边框的时候，浏览器会把四个角绘制成圆角

修改边框种类。

绘制四个不同半径的边框

4.图像边框：border-image

可以让元素的长度或宽度处于随时变化时，变化状态的边框统一使用一个图像文件来进行绘制。

2.5.CSS3变形功能

1.利用transform实现文字或图像的旋转，缩放，倾斜移动这四种类型的变形处理。

旋转：totate(角度)

缩放：scale(值):0.5即为缩放到50%

倾斜:skew(值),值为角度

移动：translate(值)

对一个元素使用多个方法

transform：方法1 方法2 方法 3 方法4

改变元素基点

transform-origin:

2.6.CSS3的动功能

1.transition功能：支持从一个属性值平滑到另外一个属性值

允许CSS属性值在一定的时间内平滑的过度，这种效果可以在单击，获得焦点，被点击或对元素任何改变中触发，并圆滑的以动画效果改变CSS属性值。

(1)执行变换的属性：transition-property：过渡即将开始

none：没有属性会获得过渡效果

all:所以属性会获得过渡效果

property：定义应用过渡效果的CSS属性名称列表，以逗号分隔

(2)变换延续时间：transition-duration：规定完成过渡需要花费的时间，默认值零没有效果。

(3)在延续时间段，变换速率的变化：transition-timing-function。

(4)变换延迟时间：transition-delay：指定一个动画开始执行的时间，也就是当改变元素属性值后多长时间开始执行过渡效果。

<head>
    <meta charset="UTF-8">
    <title>CSS3中的动画效果</title>
    <style>
        div.transition1{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            -webkit-transition:all 1s linear 1s;
        }
    </style>
</head>
<body>
    <h2>transition</h2>
    <div class="transition1"></div>
</body>

2.Animations功能：支持通过关键帧的指定来在页面上产生更复杂的动画现象。

• name：指定合集名称
• duration：整个动画执行完成所需时间
• timing-function：实现动画方法
• iteration-count：重复播放次数

<head>
    <style>
        div.animation{
            width: 20px;
            height: 20px;
            background-color: #ef23ff;
        }
        /*关键帧的封装*/
        @-webkit-keyframes myan{
            0%{
                background-color: violet;
                width: 50px;
            }
            10%{
                background-color: palevioletred;
                width: 100px;
            }
            30%{
                background-color: mediumvioletred;
                width: 200px;
            }
            50%{
                background-color: blueviolet;
                width: 40px;
            }
            70%{
                background-color: darkviolet;
                width: 400px;
            }
            90%{
                background-color: #7300a4;
                width: 600px;
            }
            100%{
                background-color: #4a0068;
                width: 800px;
            }
        }
    </style>
</head>
<body>
    <h2>animation</h2>
    <div class="animation"></div>
</body>

2.7.CSS3的分页

1.点击及鼠标悬停分页样式

2.鼠标悬停过渡效果：transition: background-color .9s;

3.圆角样式：border-radius

4.边框：border:2px solid darkviolet;

2.8.布局相关样式

1.多栏布局

column-count属性：将一个元素中的内容分成多栏进行显示，要将元素的宽度设置成多个栏目的总宽度

column-width属性：指定栏目的宽度来生成分栏

column-gap属性：指定栏目之间的距离

column-rule:栏目之间添加分隔线

2.盒布局： 多栏布局的栏目宽度必须相等，指定栏目的宽度的时候也只能统一指定，但是栏目的宽度不可能全部都一样，所以多栏布局比较适合在文字内容页面显示，比如新闻。并不适合整个网页编排时使用。而盒布局就相对比较随意一些，可以定义成不同的页面。

3.弹性盒子布局

(1)box-flex：使得盒子布局变成弹性布局：可以自适应窗口

(2)box-ordinal-group：改变元素的显示顺序

(3)box-orient：改变元素排列方向

horizontal:在水平行中从左向右排列子元素

vertical：从上向下垂直排列子元素

<style>
    div.all{
        display: -webkit-box;
        /*-webkit-box-orient: vertical;窗口垂直现实与水平显示*/
        }
        .left{
            width: 300px;
            background-color: #ef23ff;
            -webkit-box-ordinal-group:3;
        }
        .right{
            width: 300px;
            background-color: #ef23ff;
            -webkit-box-ordinal-group: 2;
        }
        .center{
            -webkit-box-flex:1;
            background-color: #962fff;
            -webkit-box-ordinal-group: 1;
        }
    </style>        

(4)元素的高度宽度自适应：就是元素的高度和宽度可以根据排列的方向改变而改变。
(5)使用弹性布局来消除空白：方法就是给子div中加入一个box-flex属性。

<style>
    .center1{
            display: -webkit-box;/*盒模型显示*/
            border: 5px solid darkviolet;
            -webkit-box-orient: horizontal;/*水平显示*/
            width: 600px;
            height: 400px;
        }
        .d1{
            background-color: #ff99e1;
            -webkit-box-flex: 2;
        }
        .d2{
            background-color: #962fff;
            -webkit-box-flex: 3;
        }
        .d3{
            background-color: #ef23ff;
            -webkit-box-flex: 4;
        }
        .d1,.d2,.d3{
            -webkit-box-sizing: border-box;
        }
    </style>

(6)对多个元素使用box-flex属性，让浏览器或者容器中的元素的总宽度或者总高度都等于浏览器或者容器高度。

(7)box-pack属性和box-align属性：指定水平方向与垂直方向的对齐方式(文字，图像，以及子元素的水平方向或是垂直方向上的对齐方式)

2.9.不同浏览器加载不同的CSS样式

Media Queries模块是CSS3中的一个和各种媒体相关的重要模块

原文链接：https://blog.csdn.net/qq_27348951/article/details/53378364