• 一个后端学习前端的小菜鸟
• 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

前言

最近在学习一些前端基础，作为CSS的层叠升级版本，咱必须也要了解了解CSS3的新特性。

新特性

CSS3的边框

边框有三个属性

• border-radius //添加圆角边框
• box-shadow // 添加阴影框
• border-image // 使用图片作为边框

<view class="box">
    <div></div>
    <div></div>
    <div></div>
</view>

.box {
    div{
        width: 50px;
        height: 50px;
    }
    
    div:nth-child(1) {
        border-radius: 25px;
    }

    div:nth-child(2) {
        border: 1px solid;
        background-color: brown;
        box-shadow: 10px 10px 5px #888888;
    }

    div:nth-child(3) {
        border:15px solid transparent;
        border-image: url(border.png) 30 30 round;
        -webkit-border-image: url(border.png) 30 30 round;
        -o-border-image: url(border.png) 30 30 round;
    }
}

CSS3背景

CSS3 中包含几个新的背景属性，提供更大背景元素控制。

• background-image
• background-size
• background-clip

div:nth-child(1) {
    background-image: url(border.png);// 设置背景图片
}

div:nth-child(2) {
    background-image: url(border.png);
    background-size: 50% 50%; //background-size指定背景图像的大小,可以使用百分比也可以使用px
}

div:nth-child(3) {
    background: yellow;
    background-clip: padding-box; // 规定背景的绘制区域
    border: 5px dotted black;
}

CSS3渐变效果

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用，CSS3提供了两种类型的渐变

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

div:nth-child(1) {
    height: 100px;
    // 从左上到右下的渐变效果
    background-image: linear-gradient(to bottom right, rgb(149, 37, 201), yellow);
}
div:nth-child(2) {
    height: 100px;
    // 从左到右的渐变效果
    background-image: linear-gradient(to right, rgb(21, 91, 170), yellow);
}
div:nth-child(3) {
    height: 150px;
    background-color: red;
    /* 浏览器不支持的时候显示 */
    // 渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）
    background-image: radial-gradient(red, green, blue);
    /* 标准的语法（必须放在最后） */
}

CSS3文本效果

• 文本阴影

text-shadow: 5px 5px 5px blue;// 前三个参数为各种方向大小，最后为阴影的颜色

• 文本溢出内容显示

white-space: nowrap; 
width: 200px; 
overflow: hidden; 
text-overflow: clip;

• 强制换行

word-wrap:break-word;// 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字

简单的CSS的部分新特性给大家介绍完啦，咱们下一篇给大家讲一些进阶的。
注意：CSS3有些样式不兼容某些特殊的属性，需要特殊处理。