CSS3新特性

标签：CSS3 元素特性 width background 20px 属性

本章目标

了解 CSS3 新特性

CSS3 概述

CSS3 是什么

CSS代表“Casading Style Sheets”，就是样式表，是一种替代并为网站添加样式的标记性语言。现在所使用的CSS基本是在1998年推出的CSS2的基础上发展而来的。10年前在internet开始普及的时候，就能够使用样式表对网页进行视觉效果的统一编辑，但是在10年间CSS基本没有什么太大的变化，一直到2010年终于推出了一个全新的版本---CSS3 。CSS3只是表示下一代CSS，3只是版本号，css3在css2.1版本上加入了一些新特性。

CSS3到底给我们带来了哪些新特性呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。 .

CSS3 的一些新特性

圆角效果
图形化边界
块阴影与文字阴影
使用 RGBA 实现透明效果
渐变效果
使用 @Font-Face 实现定制字体
多背景图
文字或图像的变形处理（旋转、缩放、倾斜、移动）
多栏布局
媒体查询

CSS3 选择器

CSS选择器是个难以置信地强大的工具：它们允许我们在标签中指定特定的HTML元素而不必使用多余的 class、 ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的，而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。

属性选择器

属性选择器类型	说明
[ att ]	匹配所有含有该属性的元素
[ att="value" ]	匹配属性等于某特定值的元素
[ att ^= "value"]	匹配属性包含以特定的值开头的元素
[ att $= "value"]	匹配属性包含以特定的值结尾的元素
[ att *= "value"]	匹配属性包含含有特定的值的元素

代码示例

a[title$="tweetCC"] 
{   
    position: absolute;    
    top: 0;      
    right: 0;   
    display: block;       
    width: 140px;      
    height: 140px;   
}

img[alt]
{ border:2px dashed #000; } 

img[alt="atwi_oscar"]
{ border:2px dashed #000; }

img[alt*="filem"]
{ border:2px dashed #000; }

兄弟选择器

CSS3中唯一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级节点的所有兄弟级别元素。

比如，给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点)，在样式表中定义下面的样式就足够了：

div~img {border: 1px solid #ccc; }

结构性伪类选择器

结构性伪类选择器类型	说明	示例
:root	伪类选择页面的根元素。十有八九根节点是元素	:root
:not	想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素	div:not(.div1)
:empty	当元素内容为空时被选中	:empty
:nth-child(n)	直接匹配第number个元素。参数number必须为大于0的整数	li:nth-child(3){background:orange;} 把第3个LI的背景设为橙色
:nth-last-child(n)	与上个选择器的思想同样，但是从后面匹配元素
:nth-child(an)	匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n	li:nth-child(3n){background:orange;} 把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色
:nth-child(an+1)	倍数分组匹配	li:nth-child(3n+1){background:orange;} 匹配第1、第4、第7、…、每3个为一组的第1个；li
:nth-child(odd)	分别匹配序号为奇数的元素	与 (2n+1) 结果一样
:nth-child(even)	分别匹配序号为偶数的元素	与 (2n) 结果一样
:only-child	如果某个元素是它的父节点的唯一子节点	li:only-child { … } 我们可以使用它来选择
:last-chlid	用于选择父元素下的最后一个子节点	li:last-child
:first-child	用于选择父元素下的第一个子节点	li:first-child

伪元素选择器

伪元素选择器类型	说明
::first-letter	向文本的第一个字母添加特殊样式
::first-line	向文本的首行添加特殊样式
::before	在元素之前添加内容
::after	在元素之后添加内容

代码示例

<p class="article">This is a paragraph in an article。</p>

p.article:first-letter { color: #FF0000; } 
h1:before { content:url(logo.gif); }
h1:after { content:“this is after"; }

::before 和 ::after 高级应用

直接引用元素属性

a::after { content:"(" attr(href) ")"; }
a {
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    color: #000;
    font-size: 32px;
    padding: 5px 10px;
}
a:hover::before, a:hover::after { 
    position: absolute; 
}
a:hover::before { 
    content: "\5B"; left: -20px; 
}
a:hover::after { 
    content: "\5D"; right:  -20px; 
}

CSS3文字与文字相关样式

文字阴影与盒阴影

一般可以分为box-shadow和text-shadow两类。

可以写做：

box-shadow:Apx Bpx Cpx #xxx;
text-shadow:Apx Bpx Cpx #xxx;

Apx = x轴偏移量
Bpx = y轴偏移量
Cpx = 投影长度
XXX = 像通常一样的颜色

代码示例

#boxShadow{
    border: 5px solid #111;
    -webkit-box-shadow: 5px 5px 7px #999;
    -moz-box-shadow : 5px 5px 7px #999;
    -webkit-border-bottom-right-radius: 15px;
    padding: 15px 25px;
    height: inherit;
    width: 590px;
}

多重阴影

简单文字阴影

.textShadowSingle {
  font-size: 3.2em;
  color: #F5F5F5;
  text-shadow: 3px 3px 7px #111;
  text-align: center;
}

多重文字阴影

.textShadowMultiple {
  font-size: 3.2em;
  color: #FFF;
  text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
  text-align: center;
  padding: 10px 0px 5px 0px;
  background: #151515;
}

内阴影

box-shadow 属性可以用来制作内阴影——出现在元素内部，而不是外部。内阴影可用来制作光晕效果

body {
    -moz-box-shadow:inset 0 0 30px #000000;
    -webkit-box-shadow:inset 0 0 30px #000000;
    box-shadow:inset 0 0 30px #000000;
}

长单词与URL自动换行

对于西方文字来说，浏览器在半角空格或连字符的地方进行换行。因此，浏览器不能给较长的单词换行。

word-wrap

word-wrap 可以用两个属性值normal 和break-word。

normal 值：(默认的) 只在允许在半角空格或连字符的地方换行。
break-word ：文字可以在任何需要的地方截断以匹配分配的空间并防止溢出。

div {  
    word-wrap: break-word;   
}

text-overflow：clip | ellipsis

clip：表示剪切文字
ellipsis：表示显示省略标记(…)

但是 text-overflow 只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果

{
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

使用服务器端字体@font-face

使用 CSS3 @font-face 实现个性化字体

在网页中，我们可以用 CSS 的font-family属性来定义字体，然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体，而这些字体通常在用户的电脑中是没有安装的，所以用font-family属性就无法实现了，今天我们就介绍使用 @font-face 实现个性化字体。

代码示例

@font-face {
    font-family: "默陌肥圆手写体";
    src: url('默陌肥圆手写体.ttf')
}

body{
    font-family: '默陌肥圆手写体';
}

字体常用属性

font-family：设置文本的字体名称。
font-style：设置文本样式。
font-weight：设置文本的粗细。
font-size：设置文本字体大小。
src：设置自定义字体的相对路径或者绝对路径。

字体类型

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)

CSS3图片美化

border-radius 属性

实现图片的圆角化，或者设置椭圆，圆形图片

响应式图片：

img {
    max-width: 100%;
    height: auto;
}

缩略图：

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

CSS图片滤镜

.blur {
    filter: blur(4px);
}
.brightness {
    filter: brightness(250%);
}
.contrast {
    filter: contrast(180%);
}
.grayScale {
    filter: grayScale(100%);
}
.huerotate {
    filter: hue-rotate(180deg);
}
.invert {
    filter: invert(100%);
}
.opacity {
    filter: opacity(50%);
}
.saturate { 
    filter: saturate(7);
}
.sepia {
    filter: sepia(100%);
}
.shadow {
    filter: drop-shadow(5px  5px 3px green);
}

背景渐变

基本语法

background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);

圆括号中的第一个值（即例子中的90deg，可选）定义了渐变的方向。不定义该值则默认是一个垂直从顶部到底部的渐变。你还可以使用如to top right 这样的值，这会产生一个朝向右上角的对角线渐变下一个值（例子中的#ffffff 0%）定义的是渐变的“起点”，包括起点的颜色和位置。
你也可以使用像blue 20%这样的值，这样就是从蓝色开始渐变到下一个颜色，而渐变开始位置则位于假想的渐变路径的20%处。同样，起点位置也可以使用负值，这样渐变从实际可见区域之外就开始了。
下一个值指的是“过渡颜色点”。我们来回顾一下：沿着90 度垂直方向，从白色开始（(#ffffff 0%），向位于渐变路径50%处的#e4e4e4 这个颜色（浅灰色）渐变。这里就是渐变中的第一个过渡颜色点。如果需要的话，可以在渐变“终点”之前定义更多的过渡颜色点（使用逗号分隔）
圆括号中的最后一个值始终是渐变的“终点”。不论在起点之后放置了多少个过渡颜色点，最后一个值始终是终

径向背景渐变

.div2{
    width: 300px;
    height: 300px;
    border-radius: 50%;
}

CSS3中的变形处理

transform 变形属性

目前这两个属性得到了除去ie以外各个主流浏览器webkit，firefox，opera的支持，属性名分别为 -webkit-transform，-moz-transform，-o-transform;

transform属性实现了内联(inline)元素和块级(block)元素的旋转、缩放、移动和倾斜：

rotate（旋转）：允许你通过传递一个度数值来转动一个对象
scale（缩放）：是一个缩放功能，可以让任一元素变的更大。它使用一个或者两个正数和负数以及小数作为参数；当使用一个参数时表示X轴和Y轴的缩放相同；
translate（移动）：就是基于X和Y坐标重新定位元素，当使用一个参数时表示X轴和Y轴的参数相同；
skew（倾斜）：（ps中的斜切），参数是度数，当使用一个参数时表示X轴和Y轴的参数相同；

transform-origin 属性

ntransform-origin 是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform 属性的时候起作用；

示例代码

-moz-transform:rotate(45deg) scale(1,1) translate(20px,20px)；
-moz-transform-origin:center center；
-webkit-transform:rotate(45deg) scale(1,1) translate(20px,20px);
-webkit-transform-origin: center center;
-o-transform:rotate(45deg) scale(1,1) translate(20px,20px)；
-o-transform-origin: center center;
transform:rotate(45deg) scale(1,1) translate(20px,20px)；
transform-origin: center center;

transition 过度属性

transition 属性用于创建平滑的过渡效果，它可以用来改变元素的属性值从一个状态到另一个状态。

transition 属性是一个速记属性有四个属性：

transition-property：指定CSS属性的name，transition效果
transition-duration：transition效果需要指定多少秒或毫秒才能完成
transition-timing-function：指定transition效果的转速曲线
transition-delay：定义transition效果开始的时候
transform-style:preserve-3d ：让转换的子元素保留3D转换

CSS3 动画

@keyframes 属性

Keyframes 被称为关键帧，其类似于Flash 中的关键帧。在CSS3 中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则

@keyframes changecolor
{
    0%{background: red;}
    100%{background: green;}
}

0%和100%还可以使用关键词from 和to来代表，其中0%对应的是from，100%对应的是to

animation-name 属性

animation-name 属性主要是用来调用@keyframes 定义好的动画。需要特别注意:animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致(区分大小写)

animation-name: none | keyframesName

none 为默认值，当值为none 时，将没有任何动画效果,这可以用于覆盖任何动画
keyframesName是由@keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）

animation-duration 属性

默认值为0，意味着动画周期为0，也就是没有任何动画效果

animation-timing-function 属性

与transition-timing-function一样

animation-delay 属性

在开始执行动画时需要等待的时间

animation-iteration-count 属性

定义动画的播放次数，默认为1，如果为infinite，则无限次循环播放

animation-direction 属性

默认为nomal，每次循环都是向前播放，（0-100），另一个值为alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放

animation-state 属性

默认为running-播放，paused-暂停

animation-fill-mode 属性

定义动画开始之前和结束之后发生的操作，默认值为none，动画结束时回到动画没开始时的状态；forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；backwards，让动画回到第一帧的状态；both：轮流应用forwards和backwards规则。

transition-timing-function/animation-timing-function属性

属性值	属性值说明
ease	默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。等同于贝塞尔曲线(0.25, 0.1,0.25, 1.0)
linear	元素样式从初始状态过渡到终止状态速度是恒速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease-in	元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。等同于贝塞尔曲线(0.42, 0,1.0, 1.0)
ease-out	元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态。等同于贝塞尔曲线(0, 0, 0.58,1.0)
ease-in-out	元素样式从初始状态过渡到终止状态时，先加速，再减速。

代码示例

div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

颜色相关样式

Opacity

设置一个元素的透明度

RGBA：R（红色）、G（绿色）、B（蓝色）、A（alpha通道）

RGBA格式：RGBA（0_255,0255，0_255，01）

HSLA：H（色调）、S（饱和度）、L（亮度）、A（alpha通道）

HSLA格式：HSLA（0_360,0100%，0_100%，01）

div.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; }

RGBA

RGBA通过对RGB颜色设定通道alpha 来定义RGBA颜色，而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。

div.rgbaL1 {background:rgba(153, 134, 117, 0.2); height:20px; }
div.rgbaL2 { background:rgba(153, 134, 117, 0.4); height:20px; }
div.rgbaL3 { background:rgba(153, 134, 117, 0.6); height:20px; }
div.rgbaL4 {background:rgba(153, 134, 117, 0.8); height:20px; }
div.rgbaL5 { background:rgba(153, 134, 117, 1.0); height:20px; }

alpha 通道与opacity 属性的区别

opacity 与 alpha 都可以设置透明，1 表示不透但是使用 alpha 通道对元素设定透明度时，可以单独针对元素的背景色和文字颜色来指定透明度，而 opacity 属性只能指定整个元素的透明度。

CSS3中布局相关样式

多栏布局

分几栏

-moz-column-count:2;
-webkit-column-count:2;

每栏宽度

-moz-column-width:200px;
-webkit-column-width:200px;

设定多栏之间间隔

-moz-column-gap:20px;
-webkit-column-gap:20px;

设定多栏之间分隔线

-moz-column-rule:1px solid red;
-webkit-column-rule:1px solid red;

代码示例

<div id="container">
    <div id="div1">
        <img src="ok.jpg">
        <p>测试文字。今天是星期二今天是星期二。测试文字….</p>
        <p>测试文字。今天是星期二今天是星期二。测试文字….</p>
    </div>
    <div id="div3">页面中其他内容</div>
</div>

div#container{width:420px;}
div#div1{-moz-column-count:2;-webkit-column-count:2;
    -moz-column-width:200px;-webkit-column-width:200px;
    -moz-column-gap:20px;-webkit-column-gap:20px;
    -moz-column-rule:1px solid red;-webkit-column-rule:1px solid red;
}
div#div3{width:100%;background-color:yellow;height:50px;}

CSS3效果展示

制作按钮

.awesome{ 
background: #222 url(/images/alert-overlay.png) repeat-x; 
display: inline-block; 
padding: 5px 10px 6px; 
color: #fff; 
text-decoration: none; 
font-weight: bold; 
line-height: 1; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-moz-box-shadow: 0 1px 3px #999; 
-webkit-box-shadow: 0 1px 3px #999; 
text-shadow: 0 -1px 1px #222; 
border-bottom: 1px solid #222; 
position: relative; 
cursor: pointer; 
}

其他按钮：

通过 font-size 字体大小来控制按钮大小
通过 float：left来实现一排按钮组
通过 button:hover 来添加鼠标悬浮效果
通过button：active 和 box-shadow 可实现按压效果（原理：当处于active 状态的时候box-shadow 垂直方向的阴影量变小。按钮往下方放移动）

代码示例

button {
    display: inline-block;
    padding: 15px 25px;
    font-size: 24px;
    cursor: pointer;
    text-align: center;   
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #4CAF50;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
}

button:hover {background-color: #3e8e41}
button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

柱形图

<div class="box">
    <div class="cube two">
        <h4>80%</h4>
        <div class="topFace"><div> </div></div>
        <div class="leftFace"> </div>
        <div class="rightFace"><h5>Hurricane Ditka</h5></div>
    </div>
</div>

.cube.two {position: relative;}

.cube h4 {
    -moz-transform: rotate(-35deg) skew(30deg, 0deg);color: rgba(255, 255, 255, 0.8);left: 7px;position: absolute;}

.topFace div {
    -moz-transform: rotate(60deg) skew(0deg, -30deg) scale(1, 1.16); background-color: #F7581E;}

.rightFace,.leftFace { height: 110px; width: 40px;}

.leftFace {-moz-transform: skew(0deg, 30deg); background-color: #6F270D;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.4);  left: -19px;  position: absolute;top: 32px；}

.cube.two .rightFace {
    background-color: #BF4317;-moz-transform: skew(0deg, -30deg);left: 20px; position: absolute;top: 31px;}

.rightFace h5 {left: 1px;position: absolute;top: 10%;}

气泡效果

<p class="triangle-right "></p>

.triangle-right {
    background: -moz-linear-gradient(#2E88C4 0%,  #075698 100%);
    border-radius: 10px 10px 10px 10px;
    position: relative;
    width:200px;
    height：40px;
}
.triangle-right:after {
    border-color: #075698 transparent transparent transparent ;
    border-style: solid;
    border-width: 20px 0 20px 20px;
    bottom: -40px;
    content: "";
    display: block;
    left: 50px;
    position: absolute;
}

CSS3中的媒体查询功能

CSS3中的媒体查询是一种强大的工具，它允许开发人员创建适应不同设备和屏幕大小的网页设计。媒体查询基于CSS3的@media规则，可以检测多种设备参数，如宽度、高度、方向等，并根据这些参数应用不同的CSS样式。

媒体查询的基本语法如下：

@media mediatype and|not|only (mediaquery) {
    // CSS code
}

其中，mediatype是媒体类型，and|not|only是逻辑操作符，mediaquery是媒体查询表达式。

以下是一些常见的媒体查询示例：

根据屏幕宽度改变样式：

@media screen and (min-width: 600px) {
    body {
        background-color: lightblue;
    }
}

当屏幕宽度至少为600像素时，背景颜色会变为浅蓝色。

为打印设置样式：

@media print {
    body {
        color: black;
        background: white;
    }
}

当文档被打印时，文字颜色会变为黑色，背景颜色会变为白色。

根据屏幕方向调整样式：

@media screen and (orientation: landscape) {
    #sidebar {
        display: none;
    }
}

当设备处于横向模式时，侧边栏会被隐藏。

组合多个条件：

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .container {
        width: 50%;
    }
}

当屏幕宽度在768至1024像素之间时，容器的宽度为50%。

媒体查询是实现响应式设计的关键技术之一，它使得网页能够更好地适应各种设备和屏幕大小，提高用户的浏览体验。

css3中的 vw 、vh、vmin 、vmax 使用

vw、vh、vmin、vmax 含义

vw、 vh、 vmin、 vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（ Viewport）大小来决定的，单位 1，代表类似于 1%。

注意：视窗( Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

具体描述如下：

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

vw、vh与%百分比的区别

% 是相对于父元素的大小设定的比率， vw、 vh 是视窗大小决定的。
vw、 vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

vmin、vmax 用处

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

浏览器兼容性

桌面 PC

Chrome：自 26 版起就完美支持（2013年2月）
Firefox：自 19 版起就完美支持（2013年1月）
Safari：自 6.1 版起就完美支持（2013年10月）
Opera：自 15 版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）

移动设备

Android：自 4.4 版起就完美支持（2013年12月）
iOS：自 iOS8 版起就完美支持（2014年9月）

案例链接：https://www.hangge.com/blog/cache/detail_1715.html

CSS3中 calc() 使用

什么是 calc()

calc() 从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc() 能做什么

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。calc()语法

calc()语法

非常简单，就像我们小时候学加（+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.elm {
  width: calc(expression);
}

其中"expression"是一个表达式，用来计算长度的表达式。

calc() 的运算规则

calc() 使用通用的数学运算规则，但是也提供更智能的功能：

使用+、-、* 和 /四则运算
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有+和-时，其前后必须要有空格，如widht: calc(12%+5em)这种没有空格的写法是错误的；
表达式中有*和/时，其前后可以没有空格，但建议留有空格。

浏览器的兼容性

浏览器对 calc() 的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器对早期版本的兼容性不是太好。

大家在实际使用时，同样需要添加浏览器的前缀，如下：

.elm {
	/*Firefox*/
	-moz-calc(expression);
	/*chrome safari*/
	-webkit-calc(expression);
	/*Standard */
	calc();
 }

案例链接：https://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

标签：CSS3,元素,特性,width,background,20px,属性
From： https://www.cnblogs.com/ZWJ7671277/p/18404633

CSS3新特性

CSS3新特性

本章目标

CSS3 概述

CSS3 是什么

CSS3 的一些新特性

CSS3 选择器

属性选择器

代码示例

兄弟选择器

结构性伪类选择器

伪元素选择器

代码示例

::before 和 ::after 高级应用

CSS3文字与文字相关样式

文字阴影与盒阴影

XXX = 像通常一样的颜色

代码示例

多重阴影

简单文字阴影

多重文字阴影

内阴影

长单词与URL自动换行

word-wrap

text-overflow：clip | ellipsis

使用服务器端字体@font-face

使用 CSS3 @font-face 实现个性化字体

字体常用属性

字体类型

CSS3图片美化

border-radius 属性

CSS图片滤镜

背景渐变

基本语法

径向背景渐变

CSS3中的变形处理

transform 变形属性

transform-origin 属性

示例代码

transition 过度属性

CSS3 动画

@keyframes 属性

animation-name 属性

animation-duration 属性

animation-timing-function 属性

animation-delay 属性

animation-iteration-count 属性

animation-direction 属性

animation-state 属性

animation-fill-mode 属性

transition-timing-function/animation-timing-function属性

颜色相关样式

Opacity

RGBA

alpha 通道与opacity 属性的区别

CSS3中布局相关样式

多栏布局

分几栏

每栏宽度

设定多栏之间间隔

设定多栏之间分隔线

代码示例

CSS3效果展示

制作按钮

代码示例

柱形图

气泡效果

CSS3中的媒体查询功能

css3中的 vw 、vh、vmin 、vmax 使用

vw、vh、vmin、vmax 含义

vw、vh与%百分比的区别

vmin、vmax 用处

浏览器兼容性

桌面 PC

移动设备

CSS3中 calc() 使用

什么是 calc()

calc() 能做什么

calc()语法

calc() 的运算规则