前端开发基础3：CSS3常见显示属性-阿里云开发者社区

前端开发基础3：CSS3常见显示属性

1. 创建资源

开始实验之前，您需要先创建实验相关资源。

在实验室页面，单击创建资源。
（可选）在实验室页面左侧导航栏中，单击云产品资源列表，可查看本次实验资源相关信息（例如IP地址、子用户信息等）。

说明：资源创建过程需要3～5分钟（视资源不同开通时间有所差异，ACK等资源开通时间较长）。完成实验资源的创建后，您可以在云产品资源列表查看已创建的资源信息，例如：子用户名称、子用户密码、AK ID、AK Secret、资源中的项目名称等。

实验环境一旦开始创建则进入计时阶段，建议学员先基本了解实验具体的步骤、目的，真正开始做实验时再进行创建。

资源创建成功，可在左侧的资源卡片中查看相关资源信息以及RAM子账号信息

2. 进入VNC实验环境

进入网页环境

1.1 资源创建成功后，我们在右侧选择切换到远程桌面。

1.2 在远程桌面页面中，点击Chromium网页浏览器。

登录RAM用户

2.1 浏览器启动后会默认打开阿里云的RAM用户登录页。在登录页面中我们点击下一步按钮。

2.2 接下来我们需要输入RAM用户的密码。密码显示在实验控制台左侧，我们点击子用户密码右侧的复制按钮。

复制完成后，我们在用户密码框中按Ctrl + V 复制密码，然后点击登录按钮

进入ECS的远程连接。

3.1 登录成功后，页面跳转到控制台，我们在控制台的搜索框中输入ECS，然后点击云服务器ECS进入云服务器控制台。

3.2 在ECS控制台中，我们找到实验创建的ECS，点击右侧的远程连接按钮。

3.3 在远程连接中选择通过VNC远程连接中的立即登录如果没有显示该选项，则可点击展开其他登录方式按钮。

登录VNC远程连接

4.1 初次登录VNC远程连接时需要先设置VNC密码。点击重置VNC密码按钮。

4.2 输入两次新的VNC密码，并点击确认。

4.3 VNC密码设置成功后，输入密码并点击确认。

4.4 VNC登录成功后会看到实验ECS的登录界面。

3. 边框属性

从2000年开始CSS进入了第三个版本也就是俗称的CSS3，CSS3的特点是新功能以模块化的方式逐步加入规范。经过了20多年的发展，CSS3中已经添加了30多个模块。在本实验中我们将会为大家介绍CSS3中一些常用的功能。

CSS3为元素提供了新的边框和尺寸属性，通过这些属性可以实现一些以前必须通过JavaScript才能实现的功能。这里挑选三个比较有特色的属性为大家介绍。

贴图边框

传统的CSS只支持实线、虚线等简单风格的边框，但是现代网页设计中往往会对Html中的元素进行专门设计，使用贴图来代替简单风格的边框，这时候就需要使用贴图边框属性border-image。

1.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        border: 40px solid transparent;
        border-image: url(bg.png) 40 stretch;
        background-color: #143A59;
        color: white;
        margin: 10px;
    }
</style>
<title>Web dev</title>
<body>
    <div>
        <button />
        <button> 较短的按钮 </button>
        <button> 较长的按钮。。。。。。。。。。 </button>
    </div>
</body>
</html>

1.2 刷新网页，会看到按钮会根据长度进行自动拉伸。

1.3 除了拉伸模式之外，border-image属性还支持复制模式。我们修改index.html样式部分的内容为如下.

<style type="text/css">
    button {
        border: 40px solid transparent;
        border-image: url(bg_round.png) 40 round;
        background-color: #143A59;
        color: white;
        margin: 10px;
    }
</style>

1.4 刷新网页，会看到按钮采用了复制模式。

轮廓

传统的CSS样式可以通过border属性在元素的外侧绘制边框。在CSS3中除了支持border属性之外，还支持outline属性来绘制轮廓。

2.1 我们修改index.html得内容为如下。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        border: 10px solid red;
        outline: 10px solid green;
        background-color: #143A59;
        padding: 10px;
    }
</style>
<title>Web dev</title>
<body>
    <button></button>
    <button></button>
</body>
</html>

2.2 刷新网页。会看到按钮得外侧出现了两层颜色框。分别是border和outline。但是我们可以发现outline存在重叠得现象。这是由于outline不计入元素得尺寸计算导致得。这时我们可以通过margin属性来加入outline尺寸。我们修改index.html样式部分的内容为如下。

<style type="text/css">
    button {
        border: 10px solid red;
        outline: 10px solid green;
        background-color: #143A59;
        margin: 10px;
        padding: 10px;
    }
</style>

outline-offset

3.1 和border属性相比，outline除了不计算入尺寸之外。还可以通过outline-offset属性灵活调整在元素中得显示位置。我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        background-color: #143A59;
        outline: 5px solid brown;
        outline-style: dotted;
        outline-offset: 5px;
        margin: 10px;
        padding: 10px; 
    }
</style>
<title>Web dev</title>
<body>
    <button style="width: 100px; height: 100px;"></button>
</body>
</html>

3.2 刷新网页。会看到outline和元素本体保留了一段距离。

3.3 outline-offset除了可以设置为正值之外，还可以设置为负值。设置为负值时，outline会显示在元素本体得内部，我们修改index.html样式部分的内容为如下

<style type="text/css">
    button {
        background-color: #143A59;
        color: white;
        outline: 5px solid white;
        outline-style: dotted;
        outline-offset: -10px;
        padding: 10px; 
    }
</style>

3.4 刷新网页。会看到outline出现在元素本体内部。

4. 渐变属性

上一个小节中我们学习了CSS3中通用得边框和轮廓属性。除了边框之外CSS3还为通用元素提供了多种背景设置属性。

对于需要渐变风格背景属性，传统CSS得做法是使用背景图片，这种方式需要额外得网络访问下载图片。同时图片拉伸得效果也存在清晰度得问题。因此CSS3中提供了linear-gradient线性渐变和radial-gradient放射性渐变属性。提供原生得渐变背景

线性渐变背景

在使用线性渐变背景色linear-gradient属性时，我们需要提供至少两个颜色，作为渐变色得过渡。

1.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        width: 100px; height: 100px;
    }
</style>
<title>Web dev</title>
<body>
    <button style="background-image: linear-gradient(red, orange);"></button>
    <button style="background-image: linear-gradient(red, orange,yellow, greenyellow, green);"></button>
</body>
</html>

1.2 刷新网页。会看到button的背景采用了多种颜色的渐变。

指定渐变背景方向

渐变色属性默认采用从上到下的渐变色，除了可以设置颜色之外，还可以可选设置渐变方向。渐变方向可以使用预设值，也可以使用具体角度值。

2.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        width: 100px; height: 100px;
    }
</style>
<title>Web dev</title>
<body>
    <button style="background-image: linear-gradient(to right, red, orange, yellow);"></button>
    <button style="background-image: linear-gradient(to bottom right, orange,yellow, greenyellow);"></button>
    <button style="background-image: linear-gradient(15deg, yellow, greenyellow, green);"></button>
</body>
</html>

2.2 刷新网页。会看到三种不同的渐变角度设置方式。

放射渐变背景

除了线性渐变背景色linear-gradient属性，CSS3还提供了放射性渐变属性radial-gradient，放射性渐变从中心开始像四周渐变。

3.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        width: 100px; height: 200px;
    }
</style>
<title>Web dev</title>
<body>
    <button style="background-image: radial-gradient(red, orange, yellow);"></button>
    <button style="background-image: radial-gradient(orange,yellow, greenyellow);"></button>
    <button style="background-image: radial-gradient(circle, yellow, greenyellow, green);"></button>
</body>
</html>

3.2 刷新网页。会看到默认使用radial-gradient属性时。渐变会从元素的中心开始，按照元素的长宽比，以椭圆的形式向外渐变，如果添加了circle参数，则会按照圆形的方式进行渐变。

5. 文本属性

单行文字剪裁模式

当元素中的单行文字内容过长，超过元素的显示尺寸时，CSS默认的处理方式是截断文字，在CSS3中提供了新的属性text-overflow来空值文本的剪裁，将这个属性设置为ellipsis之后超过部分的文字会用...进行代替。

1.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        width: 65px;
        overflow: hidden;
        margin: 10px;
    }
    button.ellipsis{
        text-overflow:ellipsis;
    }
</style>
<title>Web dev</title>
<body>
    <div>
        <button class="ellipsis">1234567890</button>
    </div>
    <div>
        <button>1234567890</button>
    </div>
</body>
</html>

1.2 刷新网页。会看到使用text-overflow:ellipsis属性后的单行超长文字的尾端处理会更加的优雅。

长文本的换行模式

对于多行文字来说，CSS默认的换行模式在两个词之间进行换行，但是对于一些超长单词的文本，这种模式会导致文本超出元素，严重影响用户体验，因此在CSS3中增加了word-wrap属性，用于设置文本的换行模式。

2.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    div {
        width: 65px;
        border: 1px solid #000000;
        margin: 20px;
    }
    div.wordwrap{
        word-wrap:break-word;
    }
</style>
<title>Web dev</title>
<body>
    <div>ThisIsATextWithoutSeparation</div>
    <div class="wordwrap">ThisIsATextWithoutSeparation</div>
</body>
</html>

2.2 刷新网页。会看到使用word-wrap:break-word属性后，即使是没有分词多行超长文字也不再会超出元素的边界范围。

网络字体

传统CSS只能使用本地字体，对于本地不存在的字体，会使用默认字体代替，但是由于客户端安装的字体不一致，会导致用户显示效果的不一致，因此CSS3中引入了@font-face关键字，用于指定存放在网络上字体，当客户端本地找不到字体时，会通过@font-face中的src地址下载字体文件以实现显示效果的一致性。

3.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    @font-face {
        font-family: Alibaba-PuHuiTi-Heavy;
        src:url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi/Alibaba-PuHuiTi-Heavy/Alibaba-PuHuiTi-Heavy.ttf) format('TrueType');
    }
    div {
        border: 1px solid #000000;
        margin: 20px;
        width: 300px;
    }
</style>
<title>Web dev</title>
<body>
    <div>让天下没有难做的生意</div>
    <div style="font-family: Alibaba-PuHuiTi-Heavy;">让天下没有难做的生意</div>
</body>
</html>S

3.2 刷新网页。会看到使用使用了Alibaba-PuHuiTi-Heavy字体的第二行文字，会在短暂的下载字体的白屏时间之后显示出来。

6. 其他属性

用户调整尺寸

在使用传统的CSS时，如果需要设计用户可以拖拽修改元素大小的功能，需要进行复杂的JavaScript编程，而在CSS3中增加了resize属性。通过这个属性可以非常方便的实现可拖动的元素。

1.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    button {
        border: 1px solid transparent;
        background-color: #143A59;
        color: white;
        padding: 10px;
        resize: both;
        overflow: hidden;
        width: 300px;
    }
</style>
<title>Web dev</title>
<body>
    <button> 可拖动的按钮 </button>
</body>
</html>·

1.2 刷新网页。会看到按钮右下角出现了可拖动的手柄，点击之后拖动可以改变元素的尺寸。

多图片背景

传统的CSS样式表可以使用background-image设置背景图片，在CSS3中background-image属性可以设置,分隔的多个背景图片，多个背景图片会按照从上到小的顺序按层次显示，如果在background-image中设置了多个图片，同样可以在background-position，background-repeat等属性中为不同的背景图片进行配置，在配置时也使用,来分隔多个背景图片的配置内容。

2.1 我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    #head {
        background-image: url(https://img.alicdn.com/tfs/TB13DzOjXP7gK0jSZFjXXc5aXXa-212-48.png),
            url(https://img.alicdn.com/imgextra/i1/19999999999999/O1CN01FdwufD2Njasx4YEgj_!!19999999999999-2-tps.png);
        background-position: right bottom, left top;
        background-repeat: no-repeat, repeat;
        color: orange;
        font-size: 150px;
    }
</style>
<title>Web dev</title>
<body style="background-color: gray;">
    <div id="head" style="width: 500px;height: 300px;"> Head</div>
</body>
</html>

2.2 刷新之后，我们看到background-image中第一个url为阿里云Logo，显示在所有背景的顶层，background-position属性中的一个配置，指定Logo显示在右下角，background-repeat的第一个配置指定Logo不重复。

阴影属性

3.1 CSS3还为提供了元素和文字提供了阴影属性。分别是box-shadow和text-shadow阴影属性的设置格式为x偏移 y偏移 (模糊度) (颜色)。我们修改index.html为如下内容。

<html lang="zh-CN">
<style type="text/css">
    #head {
        width: 500px;
        height: 300px;
        text-align: center;
        line-height: 300px;
        font-size: 100px;
        color: aquamarine;
        background-color: green;
        box-shadow: 0px 0px 30px gray;
        text-shadow: 10px 10px 10px black;
    }
</style>
<title>Web dev</title>
<body>
    <div id="head"> Head</div>
</body>
</html>

3.2 刷新之后，我们看到文字阴影和元素阴影生效了。

3.3 CSS3中的阴影属性和background-image类似，也可以设置多个用,分隔的重叠阴影。体现更丰富的效果。我们修改index.html为如下内容。

<!DOCTYPE html>
<html lang="zh-CN">
<style type="text/css">
    #head {
        width: 400px;
        height: 200px;
        margin: 30px;
        text-align: center;
        line-height: 200px;
        font-size: 100px;
        color: aquamarine;
        background-color: green;
        box-shadow: 0px 0px 5px black, 0px 0px 30px gray;
        text-shadow: 0px 0px 10px white, 10px 10px 10px black;
    }
</style>
<title>Web dev</title>
<body>
    <div id="head"> Head</div>
</body>
</html>

3.4 刷新之后，我们看到多重阴影效果让元素的边缘更加的立体和丰富。

实验地址：https://developer.aliyun.com/adc/scenario/28cf95154348444ca3e86e54e8752d7d

前端开发基础3：CSS3常见显示属性