css3新特性整理(长期更新总结)

本文最后更新于：2021年10月14日 上午

简介

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。(以上摘自百度百科，嘿嘿)本文主要整理部分开发中常用到的css3新特性

1.属性选择器

以下为css3支持的选择器
css3选择器
图片来自w3c。这一块建议大家去w3c看(CSS 选择器参考手册)，那里的例子通俗易懂。提供的选择器里面，基本都挺好用的。但是有些不会很常用，比如，:root，:empty，:target，:enabled，:checked。而且几个不推荐使用，网上的说法是性能较差[attribute*=value]，[attribute$=value]，[attribute^=value]，这个我没用过，自行尝试。

2.过渡效果transition

语法

1
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

举例

1
2
3
4
5
6
7
8
9
10
11
/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition：width,.5s,ease,.2s

/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/
transition：all,.5s

/*以上为简写，下面为单属性*/
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

3.动画animation

动画分为两部分执行

  • @keyframes定义动画
  • animation开启动画

    语法

    1
    animation：@keyframes定义的动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）

    举例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     /*定义一个名为logo2-line的动画*/
    @keyframes logo2-line {
        0%{
            transform:rotate(180deg);
            opacity: 0;
        }
        100%{
            transform:rotate(0deg);
            opacity: 1;
        }
    }

    /*执行一次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;

重要属性

1
2
3
4
5
animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。    
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。    
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 
both：向前和向后填充模式都被应用。  */

动画这边只做简单的整理 因为知识点实在太多了，有需要的大哥还请自行MDN学习

4.阴影效果box-shadow

语法

1
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向(默认是从里往外，设置inset就是从外往里)

举例

1
box-shadow: 10px 10px 5px #888888;

5.边框border

语法

1
border: 边框的宽度 边框的样式 边框颜色 规定应该从父元素继承border属性的设置(非常用)

举例

1
2
3
4
5
6
7
8
/*设置四边宽度为2px  样式为soild  颜色为#000的边框*/
border:2px soild #000

/*单独设置每个方向的边框线，css属性如下*/
border-left
border-top
border-right
border-bottom

常用属性:边框弧度，常用来写圆角边框

1
2
3
4
5
/*圆角边框，常用属性*/
border-radius:定义圆角的大小(可用百分比)

/*设置10px的圆角大小*/
border-radius:10px

6.文字相关

  • 文字溢出text-overflow

    语法

    1
    text-overflow:溢出内容展示方式(clip/ellipsis);

    举例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /* 溢出内容以裁切的方式展示 */
    .test1 {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: clip; 
    }

    /* 溢出内容以省略号方式展示(常用) */
    .test2 {
      white-space: nowrap; 
      width: 200px; 
      border: 1px solid #000000;
      overflow: hidden;
      text-overflow: ellipsis; 
    }

  • 文字换行word-break

    语法

    1
    word-break:换行规则(keep-all/break-all)

    举例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    /*keep-all将会在连字符-处打断*/
    p.test1 {
      width: 140px; 
      border: 1px solid #000000;
      word-break: keep-all;
    }

    /*break-all任意字符处打断*/
    p.test2 {
      width: 140px; 
      border: 1px solid #000000;
      word-break: break-all;
    }
    </style>
    </head>
    <body>

    <h1>word-break 属性</h1>

    <p class="test1">看什么看-干嘛瞪着眼睛看着我</p>

    <p class="test2">看什么看-干嘛瞪着眼睛看着我</p>

    <p><b>注释：</b>Opera 12 和更早版本不支持 word-break 属性。</p>

    </body>
    </html>

  • 书写模式writing-mode

    语法

    1
    writing-mode:书写模式(horizontal-tb/vertical-rl)

    举例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    /*标准模式，自左向右横向书写*/
    p.test1 {
      writing-mode: horizontal-tb; 
    }

    span.test2 {
      writing-mode: vertical-rl; 
    }

    /*纵向模式自上而下书写*/
    p.test2 {
      writing-mode: vertical-rl; 
    }
    </style>
    </head>
    <body>
    <h1>writing-mode 属性</h1>

    <p class="test1">Some text with default writing-mode.</p>

    <p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-mode.</p>

    <p class="test2">Some text with writing-mode: vertical-rl.</p>

    </body>
    </html>

  • 固定行数加省略(常用)

    举例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    div{
      overflow: hidden;
      text-overflow: ellipsis;（添加省略号）
      display: -webkit-box;
      -webkit-line-clamp: 2;（控制文本行数）
      -webkit-box-orient: vertical;（子元素排列方式）
    }
    /*如果你标签内的是英文，英文是不会自动换行的，所以你需要让他自动换行添加如下代码：*/
    word-wrap:break-word;
    word-break:break-all;

    7.待补充

参考资料:

  1. MDN上的CSS教程 ↩
  2. W3C上的css3选择器 ↩
CSS
css3

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！