重温CSS3常见新特性的奥秘（个人总结）

最近觉得CSS3真的很神奇，完全掌握了用的时候真的非常有趣，但是就是用的时候很难用好，所以我就整理了一下关于CSS3的新特性，也方便自己查阅，要是文章中有什么不对的或者更好的方法，欢迎大家指出~

transition - 过渡

通过过渡transition，可以使开发者不需要javascript就可以实现简单的动画交互效果。

语法

transition: property duration timing-function delay;

属性值和描述

实例-过渡

从初始状态过渡到终止状态时速度由快到慢，运动时间2s，1s后开始执行

div
{
    width:80px;
    height:80px;
    background:rgb(18, 185, 121);
    transition:width 2s ease 1s;
    -webkit-transition:width 2s ease 1s; 
}

div:hover
{
    width:200px;
}

实例-hover效果

大家可以看出左边的按钮运动时间用了3秒，右边鼠标放上去颜色就出来了，这就是左边用了过渡，右边没有用过渡的效果

代码如下：

css代码

button{
    width:100px;
    height:70px;
    border-radius: 10%;
    color: forestgreen;
}
.one{
    transition: all 3s;
}
button:hover
{
    background:rgb(218, 118, 4);
}

html代码

<div>
    <button class="one">Monday</button>
    <button class="two">Tuesday</button>
</div>

实例-过渡旋转

css代码

.box {
    height: 200px;
    width: 200px;
    background: -webkit-radial-gradient(rgb(105, 103, 204),rgb(226, 40, 26),rgb(106, 177, 85));
      transition: all 3s;
}
.box:hover {
    transform: rotate(180deg) scale(.5, .5);
        background: -webkit-radial-gradient(rgb(218, 44, 116),rgb(45, 47, 207),rgb(201, 128, 19));
}

html代码

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

animation - 动画

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

属性和值的描述

实例-动画

上面的动画采用的渐变的背景，动画5s完成，鼠标放在上边动画就暂停

.box {
  background: -webkit-radial-gradient(rgb(211, 28, 43),rgb(130, 190, 111),rgba(228, 184, 42, 0.425));
  height: 120px;
  width: 120px;
  position:relative;
  animation: change 5s infinite;
}
.box:hover {
  animation-play-state: paused;
}
@keyframes change
{
    from {left:0px;}
    to {left:200px;}
}

实例-不同时间点动画

里面的10%，50%，70%，100%代表在变化中不同时间点的属性值

.box {
    height: 120px;
    width: 120px;
      position:relative;
    animation: change 2s linear 2s infinite reverse running both;
}
.box:hover {
    animation-play-state: paused;
}
@keyframes change {
   0% {
      height: 150px;
          background: -webkit-radial-gradient(rgb(44, 218, 111),rgb(130, 190, 111),rgba(230, 37, 172, 0.425));
   }
   50% {
      width: 80px;
   }
   70% {
      width: 200px;
      height: 200px;
   }
   100% {
      width: 100px;
      height: 100px;
        background: -webkit-radial-gradient(rgb(218, 64, 44),rgb(45, 207, 118),rgb(201, 128, 19));
   }
}

shadow - 阴影

语法

box-shadow: h-shadow v-shadow blur spread color inset

属性和值的描述

实例-div阴影

div
{
    width:300px;
    height:100px;
    background-color:rgb(75, 179, 75);
    box-shadow: 15px 15px 10px #888888;
}

实例-图片阴影

 <style>
    .pic img
        {
            width:300px;
            height:200px;
            margin-right:30px;
        }
    .onepic{
        box-shadow: 15px 15px 10px #748ab8;
    }
    .twopic{
        box-shadow:  15px 15px 10px #944848;
    }
  </style>
  
  
  <div class="pic">
    <img src="./three.jpg" class="onepic"/>
    <img src="./four.jpg" class="twopic"/>
  </div>

transform - 转换

语法

transform: none|transform-functions

属性和值的描述

实例-2D旋转

     .pic img{
        width:200px;
        height:100px;
        transform:rotate(15deg);
        margin: 60px;
    }
    
    <div class="pic">
         <img src="./five.jpg" class="onepic"/>
    </div>

实例-2D倾斜

     .pic img{
        width:200px;
        height:100px;
        transform: skew(10deg,10deg);
        margin: 60px;
    }
    
  <div class="pic">
    <img src="./five.jpg" class="onepic"/>
  </div>

实例-3D旋转

     .pic img{
        width:200px;
        height:100px;
        margin: 60px;
    }
    .pic:hover{
        transform:rotateX(180deg);
    }
    
    <div class="pic">
        <img src="./five.jpg" class="onepic"/>
    </div>

实例-3D旋转

.pic img{
        width:200px;
        height:100px;
        margin: 60px;
        transform:rotate3d(10,10,10,60deg);
    }
    
  <div class="pic">
    <img src="./five.jpg" class="onepic"/>
  </div>

transform-origin

语法

transform-origin: x-axis y-axis z-axis

属性和值的描述

实例-设置旋转基点位置

     .pic
        {
            position: relative;
            height: 200px;
            width: 200px;
            margin: 100px;
            padding:10px;
            border: 1px solid rgb(201, 134, 46);
        }
        .pic2
        {
            padding:50px;
            position: absolute;
            background-image: url("./four.jpg");
            transform: rotate(45deg);
            transform-origin:20% 40%;
        }
        
        
    <div class="pic">
        <div class="pic2">hello</div>
    </div>

transform-style

语法

transform-style: flat|preserve-3d

属性和值的描述

实例-子元素3D转换

#div1
        {
            position: relative;
            height: 200px;
            width: 200px;
            margin: 100px;
            padding:10px;
            border: 1px solid rgb(197, 139, 32);
        }
    #div2
        {
            padding:50px;
            position: absolute;
            background-image: url("./four.jpg");
            transform: rotateY(60deg);
            transform-style: preserve-3d;
        }

        #div3
        {
            padding:40px;
            position: absolute;
            background-image: url("./six.jpg");
            transform: rotateY(-50deg);
            box-shadow:  15px 15px 10px #944848;
        }
        
 <div id="div1">
    <div id="div2">HELLO
        <div id="div3">HAPPY</div>
    </div>
  </div>

background背景

语法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit

属性和值的描述

实例-背景图片

Css

    .box{
        display: flex;
        justify-content: center;
    ·}
     .box1{
         text-align: center;
         width: 300px;
         height: 250px;
         background-image: url("./six.jpg");
     }
     .box2{
         text-align: center;
         width: 300px;
         height: 250px;
         background-image: url("./sun.png");
     }

html

<div class="box">
    <div class="box1">
        <p>I love the sea</p>
        <p>I feel very happy</p>
    </div>
    <div class="box2">
        <p>I like the sun</p>
        <p>I feel very happy</p>
    </div>
</div>

border-image边框图片

语法

border-image: source slice width outset repeat|initial|inherit

属性和值的描述

实例-边框

css

    .box{
        border: 10px solid transparent;
        padding: 15px;   
        border-image: url(./border.jpg);
        border-image-slice: 30;
        border-image-repeat: repeat;
        border-image-outset: 0;
    }

html

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

Flex布局

两栏布局

css部分

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 200px;
   /* flex-grow: 0;
      flex-shrink:0;
      flex-basis:200px; */
}
.outer2 .right {
   flex: auto;
}

html部分

<div class="outer outer2">
  <div class="left">2-left</div>
  <div class="right">2-right</div>
</div>

效果图：

三栏布局

css部分

.outer2 {
   display: flex;
}
.outer2 .left {
   flex: 0 0 100px;
}
.outer2 .middle {
   flex: auto;
}
.outer2 .right {
   flex: 0 0 200px;
}

html部分

<div class="outer outer2">
  <div class="left">2-left</div>
  <div class="middle">2-middle</div>
  <div class="right">2-right</div>
</div>

效果图：

圣杯布局

css部分

header, footer {
   height: 100px;
   width: 100%;
   background-color: antiquewhite;
}
.container {
   height: 200px;
   padding-left: 200px;
   padding-right: 300px;
}
.container > div {
   float: left;
   position: relative;
   height: 100%;
}
.left {
   width: 200px;
   height: 200px;
   background-color: burlywood;
   margin-left: -100%;
   left: -200px;
}
.right {
   width: 300px;
   height: 200px;
   background-color: burlywood;
   margin-left: -300px;
   right: -300px;
}
.middle {
   width: 100%;
   height: 200px;
   background-color: #b0f9c2;
}

html部分

<header>header</header>
    <div class="container">
      <div class="middle">midlle</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
<footer>footer</footer>

效果图：

Filter - 滤镜

CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。

实例-原图

css部分

.box {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.box img {
   width: 300px;
   height: 300px;
   -webkit-filter: none;
   filter: none;
}

html部分

<div class="box">
   <p>原图</p>
   <img src="./timg.gif"/>
</div>

效果图：

实例-模糊

css修改

-webkit-filter: blur(5px);
filter: blur(5px);

效果图：

实例-灰度

css修改

-webkit-filter: grayscale(1);
filter: grayscale(1);

效果图：

实例-亮度

css修改

-webkit-filter: brightness(1.5);
filter: brightness(1.5);

效果图：

实例-对比度

css修改

-webkit-filter: contrast(2.4);
filter: contrast(2.4);

效果图：

实例-饱和度

css修改

-webkit-filter: saturate(1.6);
filter: saturate(1.6);

效果图：

实例-色相旋转

css修改

-webkit-filter: hue-rotate(160deg);
filter: hue-rotate(160deg);

效果图：

实例-反色

css修改

-webkit-filter: invert(1);
filter: invert(1);

效果图：

实例-阴影

css修改

-webkit-filter: drop-shadow(0px 0px 5px #000);
filter: drop-shadow(0px 0px 5px #000);

效果图：

实例-透明度

css修改

-webkit-filter: opacity(75%);
filter: opacity(75%);

效果图：

实例-褐色

css修改

-webkit-filter: sepia(0.77);
filter: sepia(0.77);

效果图：

边框

实例-圆角

css部分

#radius {
    border: 2px solid #a1a1a1;
    padding: 10px 40px; 
    background: #dddddd;
    width: 300px;
    border-radius: 25px;
}

html部分

<div id="radius">创建盒子边框圆角创建盒子边框圆角创建盒子边框圆角创建盒子边框圆角</div>

效果图：

实例-盒阴影

css部分

#shadow {
    width: 200px;
    height: 200px;
    background-color:yellow;
    box-shadow: 10px 10px 5px #888888;
}

html部分

<div id="shadow"></div>

效果图：

实例-边界图片

css部分

#round {
   -webkit-border-image: url('./border.png') 30 30 round; /* Safari 5 and older */
   -o-border-image: url('./border.png') 30 30 round; /* Opera */
   border-image: url('./border.png') 30 30 round;
}

html部分

<div id="round">这里，图像平铺（重复）来填充该区域。</div>

效果图：

线性渐变 Linear Gradient

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

实例-从上到下

从上到下（默认情况下）

// css
.grad1 {
    height: 200px;
    width: 200px;
    background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(#2A8BBE, #FE280E);
}

// html
<div class="grad1"></div>

实例-从左到右

// css
.grad2 {
    height: 200px;
    width: 200px;
    background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(to right, #2A8BBE, #FE280E);
}

// html
<div class="grad2"></div>

实例-对角

// css
.grad3 {
     height: 200px;
     width: 200px;
     background-color: red; /* 浏览器不支持时显示 */
     background-image: linear-gradient(to bottom right, blue, #FE280E);
}

// html
<div class="grad3"></div>

实例-定义角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度。角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

// 语法
background-image: linear-gradient(angle, color-stop1, color-stop2);

css部分

#wrap {
   width: 300px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}
#grad1 {
   height: 150px;
   width: 150px;
   background-color: red; /* 浏览器不支持的时候显示 */
   background-image: linear-gradient(0deg, red, yellow); 
}
#grad2 {
   height: 150px;
   width: 150px;
   background-color: red; /* 浏览器不支持的时候显示 */
   background-image: linear-gradient(90deg, red, yellow); 
}
#grad3 {
    height: 150px;
    width: 150px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: linear-gradient(180deg, red, yellow); 
}
#grad4 {
    height: 150px;
    width: 150px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: linear-gradient(-90deg, red, yellow); 
}

html部分

<div id="wrap">
   <div id="grad1" style="text-align:center;">0deg</div><br>
   <div id="grad2" style="text-align:center;">90deg</div><br>
   <div id="grad3" style="text-align:center;">180deg</div><br>
   <div id="grad4" style="text-align:center;">-90deg</div>
</div>

效果图

径向渐变 Radial Gradient

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

实例-设置形状

css部分

#radient {
   display: flex;
   flex-direction: row;
}
.radient {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-right: 20px;
}
#radient1 {
   height: 150px;
   width: 200px;
   background-color: red; /* 浏览器不支持的时候显示 */
   background-image: radial-gradient(red, yellow, #FE280E); /* 标准的语法（必须放在最后） */
}
#radient2 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(circle, red, yellow, #FE280E); /* 标准的语法（必须放在最后） */
}

html部分

<div id="radient">
   <div class="radient">
      <p><strong>椭圆形 Ellipse（默认）：</strong></p>
      <div id="radient1"></div>
   </div>
   <div class="radient">
      <p><strong>圆形 Circle：</strong></p>
      <div id="radient2"></div>
   </div>
</div>

效果图：

实例-颜色均匀

css部分

#radient3 {
   height: 150px;
   width: 200px;
   background-color: red; /* 浏览器不支持的时候显示 */
   background-image: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}

html部分

<div class="radient">
   <h3>径向渐变 - 颜色结点均匀分布</h3>
   <div id="radient3"></div>
</div>

效果图：

实例-颜色不均匀

css部分

#radient4 {
   height: 150px;
   width: 200px;
   background-color: red; /* 浏览器不支持的时候显示 */
   background-image: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}

html部分

<div class="radient">
   <h3>径向渐变 - 颜色结点不均匀分布</h3>
   <div id="radient4"></div>
</div>

效果图：

文字

实例-单行超出显示省略号

单行超出部分显示省略号

css部分

.single {
      width:200px; 
    border:1px solid #c01c1c;
    padding: 20px;
    overflow:hidden;
    white-space:nowrap; 
    text-overflow:ellipsis;
}

html部分

<div class="single">单行超出部分显示省略号单行超出部分显示省略号超出部分显示省略号</div>

效果图:

实例-多行超出显示省略号

多行超出部分显示省略号

css部分

.double {
    width:200px; 
    border:1px solid #c01c1c;
    margin:0 auto;
    overflow : hidden;
    text-overflow: ellipsis;
    padding:0 20px;
    line-height:30px;
    height:60px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

注意：如果多行元素想和单行元素显示省略号时添加padding效果时，不能直接使用padding进行操作。

html部分

<div class="double">多行超出部分显示省略号多行超出部分显示省略号多行超出部分显示省略号多行超出部分显示省略号多行超出部分显示省略号多行超出部分显示省略号多行</div>

效果图：

实例-文字阴影

文字阴影 text-shadow

css部分

h1 {
   text-shadow: 5px 5px 5px #FF0000;
}

html部分

<h1>文本阴影效果！</h1>

效果图：

实例-文字换行

文字换行 word-wrap

css部分

p {
   width: 150px;
   padding: 20px;
   border: 1px solid #FF0000;
   word-wrap: break-word;
}

html部分

<p>
   测试文本换行
   testing word break!
</p>

效果图：

总结

通过上面的CSS3常见属性和例子，让我更加对这些属性的了解。其实这些CSS3属性看似简单，但实则真实项目开发中又不容易记住。最重要的是，大家要多加练习，实操是最重要的一环，孰能生巧也是这样来的！css3不仅要会用，也要用好，用好css3，在项目的开发上，很有帮助的！

最后

希望看到这篇文章的小伙伴都能有所收获~

欢迎大家加入，一起学习前端，共同进步！