CSS3

最新推荐文章于 2025-05-13 00:48:22 发布

Suoz

最新推荐文章于 2025-05-13 00:48:22 发布

阅读量1k

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.youkuaiyun.com/Suoz_wly0710/article/details/70162355

版权

CSS3 专栏收录该内容

2 篇文章

订阅专栏

选择器

属性选择器：

div : 标签选择器
id : ID选择器
class : 类选择器
div .p : 交集选择器
div p : 后代选择器
div>p : 子代选择器
div+p : 相邻选择器(div标签相邻的p标签)
div~p : (div标签后面的所有p标签)

E:[attr]
E:[attr=value]
E:[attr^=value]
E:[attr$=value]
E:[attr*=value]
E:[attr~=value]

//不论类名有多少个，^代表必须以该value值开头，因此一个类包含多个类名，类名也必须以该value值开头，否则不等。

结构选择器

E:first-child //代表E元素父节点下第一个子元素，并且该子元素与E一致，否则无效
E:last-child
E:nth-child()
E:nth-child(n) //n代表0,1,2,3....(当n小于1时无效)
E:nth-last-child(1) //从后向前选择，表示倒数第一个元素

伪类选择器

E:target  //表示激活的状态，要配合锚点使用
E:empty   //表示元素为空的状态

伪元素：通过css模拟出html的效果

E::after
E::before //代表在E元素内的最后一个位置插入虚构的元素

伪元素选择器

E::first-letter
E::first-line
E::selector

色调模式

在CSS2中可以改变元素的透明度，但仍存在缺陷，改变外部元素的透明度，由于透明度继承性，会导致内部元素的透明度也发生改变，并且不能再更改内部元素的透明度。

<div id="parent">
    <div id="son"></div>
</div>

#parent{
    width:200px;
    height:200px;
    background-color:red;
    opacity:0.3;
}

#son{
    width:100px;
    height:100px;
    background-color:blue;
}

CSS3新增了两种颜色模式：

RGBA : Red Green Blue (0-255) Alpha(0-1)
HSLA : 色调(0-360) 饱和度(0-100%) 亮度(0-100%) 透明度(0-1)

文字阴影

text-shadow : 水平位移垂直位移模糊程度阴影颜色
注：若在同一个元素上想使用多个阴影效果，可以并列写，用逗号隔开

<p class="tu">你好，世界</p>
<p class="ao">你好，世界</p>

body{
    background-color:#ccc;
}
p{
    color:#ccc;
    text-align:center;
    font-size:80px;
    font-weight:bold;
    margin-top:20px;
}
.tu{
    text-shadow:-1px -1px 0 #fff,1px 1px 0 #000;
}
.ao{
    text-shadow:-1px -1px 0 #000,1px 1px 0 #fff;
}

盒子模型

三个盒子：content-box、padding-box、border-box
盒模型：box-sizing : content-box(外加模式) / border-box(内减模式)

私有化前缀

CSS3浏览器支持程度差，有时需要添加私有前缀

<div id="box"></div>

//实现渐变效果
#box{
    width : 200px;
    height : 200px;
    margin : 0 auto;
    border : 1px solid black;
    //实现从左到右 红色到蓝色的渐变效果
    background : linear-gradient(left,red,blue); 
    //添加私有前缀
    background : -webkit-linear-gradient(left,red,blue);
    background : -moz-linear-gradient(left,red,blue);
    background : -ms-linear-gradient(left,red,blue);
    background : -o-linear-gradient(left,red,blue);
}

浏览器内核私有前缀：
Google、Safari : -webkit-
Firefox : -moz-
IE : -ms-
Opera : -o-

实现真正的3D效果

透视perspective仅仅是视觉上呈现3D效果，并不是真正的3D

<div id="in">
    <div id="out"></div>
</div>

        #in{
        width: 500px;
        height: 500px;
        margin: 100px auto;
        perspective: 113px;
        background-color: red;
        transform: rotateY(75deg);
    }

    #out{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: pink;
        transform: rotateY(45deg);
    }

想要真正的实现3D效果，使用transform-style:preserve-3d

<div id="in">
    <div id="out"></div>
</div>

    #in{
        width: 500px;
        height: 500px;
        margin: 100px auto;
        background-color: pink;
        position: relative;
        transform: rotateY(85deg);
        transform-style: preserve-3d;
    }
    #out{
        width: 300px;
        height: 300px;
        background-color: red;
        position: absolute;
        top: 100px;
        left: 100px;
        transform: rotateX(45deg);
    }

用transition 或 animation 实现进度条

    <div id="content">
        <span class="expand"></span>
    </div>
    <a href="javascript:void(0)" class="triggerFull">Start Animation</a>

html{
    height: 100%;
}
body{
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #161616;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
}
a{
    text-decoration: none;
    display: block;
}
.triggerFull{
    width: 140px;
    font-size: 0.8em;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #111;
          background: -webkit-linear-gradient(top, #161616 0%, #000000 100%);
    padding: 10px;
    text-transform: lowercase;
    color: #fff;
    margin: 100px auto;
    text-align: center;
    border-radius: 3px;
}
#content{
    width: 100%;
    height: 5px;
    margin: 100px auto;
    background-color: #000;
    position: relative;
}

/**  第一种方法：使用transition **/
.expand{
    display: block;
    width: 0%;
    height: 1px;
    position: absolute;
    top: 0;
    margin: 2px 0;
    background-color: #2187e7;
    box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7);
    transition: all 10s linear;
}

//点击a添加class:fullwidth
.fullwidth .expand{
    width: 100%;
} 

/**  第二种方法：使用动画  **/
.fullwidth .expand{
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    margin: 2px 0;
    background-color: #2187e7;
    box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7);
    -webkit-animation: move 10s linear;
}

@keyframes move{
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}

    //绑定事件兼容性
    function addEvent(element,type,fn){
        if(element.addEventListener){
            element.addEventListener(type, fn);
        }else{
            element.attachEvent('on'+type, fn);
        }
    }

    //判断Class是否存在
    function hasClass(element,className){
        return element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
    }

    //增加Class类名
    function addClass(element,className){
        if(!hasClass(element,className)){
            element.className += " " + className;
        }
    }

    window.onload = function(){
        var btn = document.querySelector('.triggerFull');
        var div = document.getElementById('content');
        addEvent(btn,'click',function(){
            addClass(div,"fullwidth");
        });
    };

=========================补充=============================

一、伪类选择器 :target IE9+

:target属于伪类选择器，就像上面所说的，表示激活的状态，需要配合锚点使用。

此处点击a标签，页面会自动跳转到#parent标签下(a标签自带的功能)，配合:target，实现点击后改变样式，此时url后缀会加上#parent，即使刷新也会存在，只有手动删除才会恢复原来的样式。

    <div id="parent">
        <span>hello</span>
    </div>
    <div id="brand">
        <a href="#parent">跳转</a>
    </div>

    #parent{
        width: 100px;
        height: 1200px;
        background: pink;
    }
    #parent:target{
        background: red;
    }
    #parent:target span{
        color: green;
    }

二、状态伪类选择器 IE9+

:checked 常用于form表单内的单选框和复选框
:enabled
:disabled
:focus

<form action="#">
    姓名<input type="text" name="username" id="username">
    学号<input type="text" name="number" id="number" disabled="true">
    <input type="radio" name="sex" id="male">男
    <input type="radio" name="sex" id="female">女
</form>

#username:focus{
    border: 1px solid red;
}
#number:disabled{
    border: 1px solid blue;
}
input[name="sex"]:checked{
    display: block;
}
input:enabled{
    background: red;
}

三、结构伪类选择器 IE9+

:fist-child
:last-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:first-of-type
:last-of-type
:only-child
:empty

nth-child(n)与nth-of-type(n)区别：

//只是为了演示效果，实际不推荐这么写
<ul>
    <div>1</div>
    <div>2</div>
    <li>3</li>
    <li>4</li>
</ul>

ul > div:nth-of-type(2){
    color: blue;  //有效
}
ul > li:nth-chid(2){
    color: red;  //无效
}
ul > li:nth-of-type(2){
    color: green;  //有效
}

:nth-of-type ：确定了某个位置上的某类型的子元素
:nth-child ：只是确定了某个位置上的子元素，并没有确定类型

四、伪元素

::before和::after不是指存在于标记中的内容，而是可以额外插入内容的位置。尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。

在浏览器中当我们选取某段文字，默认是浅蓝色背景+黑色字体。如果想改变这样的样式，可以通过::selection。但是该伪元素在IE中只有IE9支持，并且在Firefox中需要加-moz-前缀(::-moz-selection)、以及该伪元素只支持color和background-color两个属性的设置。

注：在CSS3中伪类用一个冒号:表示，而伪元素用两个冒号表示::

<span>hello world</span>

span::selection{
    color: #fff;
    background-color: pink;
}
span::-moz-selection{
    color: #fff;
    background-color: pink;
}

五、border-image

boder-image浏览器支持度强一些，但运用在项目中仅存在一些前端爱好者的blog中。
为了更好的理解，暂时把boder-image在语法的表达形式进行属性的分解阐述（实际应用中是不能分解的，此处只是为了帮助更好理解该属性）
引入背景图片：boder-image-source
切割引入背景图片(切片)：border-image-slice
边框图片的宽度：boder-image-width
边框背景图片的排列方式：boder-image-repeat

此处重点讲的是排列方式：repeat、round、stretch
repeat（水平重复）：边框从中间向两边不断平铺，在平铺过程中保持边框背景图片切片的大小，这样就造就了两端边缘可能有被切的现象；
round（水平平铺）：对边框背景图的切片进行压缩（或伸缩）来适应边框宽度的大小，进行排列，使其正好显示在区域内；
stretch（水平拉伸）：只会把相应的切片进行拉伸，适应边框的大小，默认值；

六、border-radius IE9+

1)border-radius:<-length>{1}设置一个值：top-left/top-right/bottom-right和bottom-left四个值相等。
2)border-radius:<-length>{2}设置两个值：top-left和bottom-right一致、top-right和bottom-left一致。
3)border-radius:<-length>{3}设置三个值：top-left、top-right和bottom-left、bottom-right
4)border-radius:<-length>{4}设置四个值：top-left、top-right、bottom-right、bottom-left分别为不同的值。

boder-radius:<-length>/<-length>：四个角X轴/四个角Y轴
如果X与Y一致，可以省略为一个值。
boder-radius:<-length><-length><-length><-length>/<-length><-length><-length><-length> ：左上角X轴右上角X轴右下角X轴左下角X轴 / 左上角Y轴右上角Y轴右下角Y轴左下角Y轴

border-radius还是内半径和外半径之分

div{
    width: 300px;
    height: 300px;
    border: 100px solid #ccc;
    /*大于100px 边框 和（内容+padding）半径都改变*/
    border-radius: 150px;  
    /*小于100px只有 边框 半径改变*/
    border-radius: 50px;  
}

boder-radius的应用：

div{
    margin-top: 20px;
}
#box1{
    width: 100px;
    height: 100px;
    background: orange;
    border-radius: 50%;
}
#box2{
    width: 100px;
    height: 50px;
    background: pink;
    border-radius: 50px 50px 0 0;
}
#box3{
    width: 100px;
    height: 100px;
    background: blue;
    border-radius: 100px 0 0 0;
}
#box4{
    width: 100px;
    height: 50px;
    background: green;
    /*border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;*/
    border-radius: 50px/25px;
}

border-radius:50px/25px：代表四个角X轴为50px，Y轴为25px；
border-radius:50px 25px：代表左上角和右下角X、Y轴都为50px，右上角和左下角X、Y轴都为25px；

七、box-shadow IE9+

box-shadow: none | [inset x-offset y-offset blur-radius spread-radius color],[inset x-offset y-offset blur-radius spread-radius color]…

box-shadow属性可以使用一个或多个阴影，用“逗号”隔开

inset：可选，阴影类型，设置为内阴影；默认为外阴影
x-offset：阴影水平偏移量(正右负左)
y-offset：阴影竖直偏移量（正上负下）
blur-radius：阴影模糊半径
spread-radius：阴影扩展半径，取正值将加深阴影深度，取负值可以向内压缩阴影，直到扩展半径等于模糊半径。

以下代码可以实现实线边框效果，但实质上并非“边框”，因为box-shadow并不是盒模型中的元素，不会计算到内容宽度（即box-shadow不会影响页面的任何布局）

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 200px;
    height: 100px;
    margin-left: 30px;
    float: left;
}
.border{
    border: 10px solid #ccc;
}
.box-shadow{
    box-shadow: 0 0 0 10px red;
}

第二段代码：

#box{
    width: 200px;
    height: 200px;
    background: url(1.jpg);
    border-radius: 50px;
    box-shadow: inset 5px 5px 5px 0 black;
    margin-bottom: 10px;
}
#img{
    width: 200px;
    height: 200px;
    border-radius: 50px;
    box-shadow: inset 10px 10px 5px 0 black;
}

<div id="box"></div>
<img src="1.jpg" id="img">

注：
1. box-shadow的inset如果要运用在图片上，需要设置一个外容器，在将该图片设置为背景图片，接着使用box-shadow。如果直接运用的img标签上则无效。
2. 另外还要注意，如果一个图片大于设置的宽高度，直接用外容器设置背景图片与img标签设置图片，两者显示的区别。前者可能显示图片的一小部分，而img标签将图片进行压缩按照规定的宽度和高度并显示整张图片。
3. IE8以及以下低版本不支持。要想兼容IE低版本，可以使用IE的滤镜来模拟实现。

八、背景的基本属性

背景主要包括五个属性：
background-color
background-image
background-repeat
background-attachment(背景图片是固定还是滚动)
background-position(背景图片位置)

与背景相关的新增属性：
background-origin(指定背景图片的起点) IE9+
background-clip(指定背景图片的显示范围) IE9+
background-size(指定背景图片的尺寸大小) IE9+
background-break(指定内联元素的背景图片进行平铺时的循环方式)
多背景特性

background-origin：虽然现代浏览器都支持，但是在不同内核的浏览器下还是需要浏览器各自的前缀

background-position:top left;   //1
background-position:left top;   //2
background-position:50% 0;      //3

#box{
    width: 100px;
    height: 100px;
    background: url(1.jpg);
    margin: 10px;
    padding: 30px;
    border: 20px solid rgba(0,0,0,0.1);
    background-size: 50px 50px;
    background-repeat: no-repeat;
    //background-origin: padding-box;  //默认
    //background-origin: content-box;
    background-origin: border-box;
}

border-box起点

注：以上三个实例都是基于background-attachment:scroll情况下实现的，如果是属性值为fixed将不起任何作用。

background-clip：虽然现代浏览器都支持，但是在不同内核的浏览器下还是需要浏览器各自的前缀

background-clip： border-box(默认) | padding-box | content-box

#box{
    width: 100px;
    height: 100px;
    background: url(1.jpg);
    margin: 10px;
    padding: 30px;
    border: 20px solid rgba(0,0,0,0.1);
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-clip: content-box;  //超过content-box的其它部分都裁剪
}

content-box裁剪

扩展：background-repeat属性值的不同，会导致background-image起点不同，只是平时我们用border-color属性覆盖住了它的显示，此时可以将border-color设置为半透明颜色，从而分析情况。

div{
    width: 300px;
    height: 100px;
    border: 50px dashed rgba(0,0,0,0.5); /*半透明颜色，分析情况*/
    background: url(1.jpg) no-repeat;
    background-color: rgba(255,0,0,0.8);
    padding: 30px;
    margin: 20px;
}
.no-repeat{
    background-repeat: no-repeat;   /*默认*/
}
.repeat{
    background-repeat: repeat;
}

background-image起始点

由图可得：

当background-repeat: no-repeat(默认值)时，background-image是从元素的内边距左上角(padding)到边框右下角(border)结束。

当background-repeat:repeat时，background-image是从元素的边框左上角到边框右下角结束，从而将background-color覆盖。

看到这里，应该了解到background-position、background-origin以及background-clip三者具体的区别

background-size：虽然现代浏览器都支持，但是在不同内核的浏览器下还是需要浏览器各自的前缀

background-size: auto | <-number> | <-percentage> | cover | contain

auto：默认值

number：数值

percentage：相对于元素宽度来说的

cover：背景图片填充整个容器大小，可能会导致图片失真的情况，注意放大后的图片不是正中间，为了让背景图片放大后显示，可以结合background-position:center使用。

background-size:cover配合background-position:center常用来制作”满屏背景”效果。唯一的缺点是，需要制作一张足够大的背景图片，不然在较大的分辨率浏览器下会导致背景图片失真

contain：可以让背景图像保持本身的宽度和高度比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域。但是也可能会导致背景图片失真的情况，并且可能图片不能填充整个容器大小

九、CSS盒模型

定义：在Web网页中，一个元素所占据空间的大小由四个部分组成，分别是内容（Content）、内边距（Padding）、边框（border）、外边距（margin），由此构成了CSS盒模型。

在CSS盒模型中分为两种，一种是W3C的标准盒模型，另外一种是IE的传统盒模型。

W3C标准盒模型：元素的宽度/高度 = 内容宽度/高度 + padding + border

IE传统盒模型：IE5- IE6~7(Quirks模式下)
元素的宽度/高度 = 内容宽度/高度、
内容宽度/高度 = padding + border

box-sizing：指定盒模型计算的方式 IE8+
border-box(默认) | content-box | inherit

注：IE传统盒模型并不是一无是处，当定义好一个元素，并在一定范围内想修改该元素的padding或border时候，元素的总尺寸是不会发生变化的，不需要重新计算元素的盒子大小，不会影响页面的整体布局。

十、渐变 IE10+

本质上说，渐变就是背景属性background-image中一个值，不在是以往的图片制作显示渐变效果，直接通过CSS3属性便可以直接操作，减轻了向服务器端发起的HTTP请求。

线性渐变

//从底部向顶部线性渐变
#top{
    background-image: linear-gradient(to top,red,green,blue,pink);
    /*background-image: linear-gradient(0deg,red,green,blue,pink);*/
}

//从右下角向左上角线性渐变
#top-left{
    background: linear-gradient(to top left,red,green,blue,pink);
    /*background: linear-gradient(-45deg,red,green,blue,pink);*/
}

//多颜色线性渐变
#many{
    background: linear-gradient(to bottom,red 0%,green 20%,blue 38%,pink 52%,black 80%,grey 100%);
}

径向渐变

div{
    width: 100px;
    height: 100px;
    margin: 10px 0 0 100px;
    border: 1px solid #ccc;
    font-size: 30px;
}

/*简单的径向渐变*/
#radial{
    background-image: radial-gradient(pink,blue);
}

/*径向渐变*/
#circle{
    background-image: radial-gradient(circle,pink,blue);
    /*background-image: radial-gradient(circle at 50% 50%,pink,blue);*/
    /*background-image: radial-gradient(circle at center,pink,blue);*/
}

/*制作一个半径为70、且圆心在中心点的径向渐变*/
#circle-70{
    background-image: radial-gradient(2em circle at center,pink,blue);
}

/*椭圆渐变*/
#ellipse{
    background-image: radial-gradient(ellipse,pink,blue);
}

/*自定义X、Y半径和圆心半径*/
#self{
    /*<number>*/
    background-image: radial-gradient(50px 30px at 30px 30px,pink,blue);

    /*<percentage>*/
    /*background-image: radial-gradient(50% 30% at 30% 30%,pink,blue);*/
}

/*多色径向渐变*/
#many{
    background-image: radial-gradient(pink,blue,yellow,green);
    background-image: radial-gradient(pink 0%,blue 25%,yellow 52%,transparent 100%);
}

重复渐变：有时候希望在一个元素的背景上重复的渐变”模式”。在没有重复渐变的属性之前，主要通过重复背景图像（使用background-repeat）创建线性渐变，但没有创建重复的径向渐变的类似方式。因此CSS3推出了repeating-linear-gradient和repeating-radial-gradient。

/*重复线性渐变*/
#repeating-linear{
    background-image: repeating-linear-gradient(pink 20px,blue 40px);
    /*background-image: repeating-linear-gradient(pink 20%,blue 40%);*/
}

/*重复径向渐变*/
#repeating-radial{
    background-image: repeating-radial-gradient(pink 20px,blue 40px);
}

注：对于不兼容渐变效果的浏览器，可以通过图片制作处理渐变效果、IE浏览器通过专门滤镜来处理等

十一、CSS3变形 IE9+

CSS3变形是一些效果的集合，比如平移、旋转、缩放和倾斜效果，每个效果都称为变形函数（Transform Function），它们可以操作元素发生旋转、平移、缩放等变化。这些效果在之前都需要依赖图片、Flash或脚本才能完成，而使用纯CSS来完成这些变形无须加载额外的文件，减少了HTTP请求，加快了页面响应速度。

坐标轴

perspective属性（透视）：简单理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由它的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；
（官方说法：该属性可将可视内容映射到一个视锥上，继而投影到一个2D视平面上。如果不设置透视属性，则Z轴空间中的所有点将平铺到同一个2D视平面内，并且变换结果将不存在景深概念）

<div id="parent">
    <div id="son"></div>
</div>

#parent{
    width: 200px;
    height: 250px;
    margin: 100px 600px;
    background-color: pink;
    perspective: 500px;  /*此处对父元素设置，对子元素设置无效*/
}
#son{
    width: 100%;
    height: 100%;
    background-color: blue;
    transform: rotateX(45deg);
    transform-origin: bottom;
}

perspective属性

backface-visibility属性： 决定元素旋转背面[ rotateY(180deg) ]是否可见。

hidden（默认） | visible

<div class="stage">
    <div class="container">
        <div class="card front"></div>
        <div class="card back"></div>
    </div>
</div>
....以下在重复6个相同的div结构

.stage{
    float: left;
    border: 1px dotted orange;
    position: relative;
    margin: 20px;
    border-radius: 8px;
    perspective: 1000;
}
.container{
    width: 102px;
    height: 142px;
    position: relative;
    transition: 0.5s;
    transform-style: preserve-3d;
}
.card{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    backface-visibility: hidden;
}
.front{
    background: blue;
}
.back{
    background: pink;
    transform: rotateY(180deg);
}
.stage:nth-child(1) .container{
    transform: rotateY(0deg);
}
.stage:nth-child(2) .container{
    transform: rotateY(-30deg);
}
.stage:nth-child(3) .container{
    transform: rotateY(-60deg);
}
.stage:nth-child(4) .container{
    transform: rotateY(90deg);
}
.stage:nth-child(5) .container{
    transform: rotateY(-120deg);
}
.stage:nth-child(6) .container{
    transform: rotateY(-150deg);
}
.stage:nth-child(7) .container{
    transform: rotateY(-180deg);
}

backface-visilibity:hidden

注意：transform: rotateX(-180deg) translateZ(100px)与transform: translateZ(100px) rotateX(-180deg) 区别

/*先进行旋转再平移*/
transform: rotateX(-180deg) translateZ(100px);

先旋转后平移

/*先进行平移再旋转*/
transform: translateZ(100px) rotateX(-180deg);

先平移在旋转

下面在来看一个立方体的例子（疑惑点）

<div class="container">
    <div class="cube hidden">
        <div class="side front">1</div>
        <div class="side back">2</div>
        <div class="side right">3</div>
        <div class="side left">4</div>
        <div class="side top">5</div>
        <div class="side bottom">6</div>
    </div>
</div>

.container{
    width: 500px;
    height: 300px;
    float: left;
    position: relative;
    margin: 200px 500px;
    perspective: 1200px;
}
.cube{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transform: rotateY(45deg);
}
.side{
    display: block;
    position: absolute;
    width: 196px;
    height: 196px;
    border: 2px solid black;
    line-height: 196px;
    font-size: 120px;
    font-weight: bold;
    color: white;
    text-align: center;
    backface-visibility: hidden; /*疑惑点：不知道为什么无效*/
}
.cube .front{
    background: rgba(255,0,0,0.7);
    transform: translateZ(100px);
}
.cube .back{
    background: rgba(0,255,0,0.7);
    transform: rotateX(-180deg) translateZ(100px);
}
.cube .right{
    background: rgba(0,0,255,0.7);
    transform: rotateY(90deg) translateZ(100px);
}
.cube .left{
    background: rgba(255,255,0,0.7);
    transform: rotateY(-90deg) translateZ(100px);
}
.cube .top{
    background: rgba(255,0,255,0.7);
    transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom{
    background: rgba(0,255,255,0.7);
    transform: rotateX(-90deg) translateZ(100px);
}

backface-visibility:visible

我的解决办法是将rgba透明度全部调整至1。如果知道为什么第一段代码我的backface-visibility:hidden;是无效的，麻烦私信我，哈哈~

平移函数translate()
缩放函数scale()
旋转函数rotate()
倾斜函数skew()

十二、outline与border

outline : [outline-size] | [outline-style] | [outline-color]
outline-offset 单独分开写，safari不能写在后面，否则无效

#box{
    outline:10px solid #ccc;
}

outline

#box{
    border:10px solid #ccc;
}

border

由上面两个图可以知道，outline是不会影响元素的盒子大小。

border与outline的区别：
1. border是元素盒模型的组成部分之一，如果改变元素的border，元素盒子大小会发生变化。而outline不会变化；
2. 在border中可以设置单边的样式（比如border-top等），而outline四条边都是一样的；
3. border只能向外扩展，而outline-offset，不仅可以向外还可以向元素内部扩展；

//如下面的右图
#box{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    outline: 10px solid #ccc;
    outline-offset: -5px;
}

outline-offset