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

小灰灰 2023-07-15 11:23 47阅读 0赞

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

## transition - 过渡 ##

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

> 语法

transition: property duration timing-function delay;

> 属性值和描述

![format_png][]

### 实例-过渡 ###

![format_png 1][]  
从初始状态过渡到终止状态时速度由快到慢，运动时间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效果 ###

![format_png 2][]  
大家可以看出左边的按钮运动时间用了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>

### 实例-过渡旋转 ###

![format_png 3][]

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代码

## animation - 动画 ##

> 语法

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

> 属性和值的描述

![format_png 4][]

### 实例-动画 ###

![format_png 5][]  
上面的动画采用的渐变的背景，动画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;}
    }

### 实例-不同时间点动画 ###

![format_png 6][]  
里面的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

> 属性和值的描述

![format_png 7][]

### 实例-div阴影 ###

![format_png 8][]

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

### 实例-图片阴影 ###

![format_png 9][]

## transform - 转换 ##

> 语法

transform: none|transform-functions

> 属性和值的描述

![format_png 10][]

### 实例-2D旋转 ###

![format_png 11][]

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

### 实例-2D倾斜 ###

![format_png 12][]

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

### 实例-3D旋转 ###

![format_png 13][]

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

### 实例-3D旋转 ###

![format_png 14][]

.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

> 属性和值的描述

![format_png 15][]

### 实例-设置旋转基点位置 ###

![format_png 16][]

.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

> 属性和值的描述

![format_png 17][]

### 实例-子元素3D转换 ###

![format_png 18][]

#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

> 属性和值的描述

![format_png 19][]

### 实例-背景图片 ###

![format_png 20][]

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

> 属性和值的描述

![format_png 21][]

### 实例-边框 ###

![format_png 22][]

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

## 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>

效果图：

![format_png 23][]

### 三栏布局 ###

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>

效果图：

![format_png 24][]

### 圣杯布局 ###

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>

效果图：

![format_png 25][]

## 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部分

效果图：

![format_png 26][]

### 实例-模糊 ###

css修改

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

效果图：

![format_png 27][]

### 实例-灰度 ###

css修改

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

效果图：

![format_png 28][]

### 实例-亮度 ###

css修改

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

效果图：

![format_png 29][]

### 实例-对比度 ###

css修改

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

效果图：

![format_png 30][]

### 实例-饱和度 ###

css修改

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

效果图：

![format_png 31][]

### 实例-色相旋转 ###

css修改

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

效果图：

![format_png 32][]

### 实例-反色 ###

css修改

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

效果图：

![format_png 33][]

### 实例-阴影 ###

css修改

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

效果图：

![format_png 34][]

### 实例-透明度 ###

css修改

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

效果图：

![format_png 35][]

### 实例-褐色 ###

css修改

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

效果图：

![format_png 36][]

## 边框 ##

### 实例-圆角 ###

css部分

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

html部分

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

效果图：

![format_png 37][]

### 实例-盒阴影 ###

css部分

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

html部分

效果图：

![format_png 38][]

### 实例-边界图片 ###

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>

效果图：

![format_png 39][]

## 线性渐变 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>

![format_png 40][]

### 实例-从左到右 ###

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

![format_png 41][]

### 实例-对角 ###

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

![format_png 42][]

### 实例-定义角度 ###

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度。角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，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部分

效果图

![format_png 43][]

## 径向渐变 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>

效果图：

![format_png 44][]

### 实例-颜色均匀 ###

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>

效果图：

![format_png 45][]

### 实例-颜色不均匀 ###

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>

效果图：

![format_png 46][]

## 文字 ##

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

> 单行超出部分显示省略号

css部分

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

html部分

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

效果图:

![format_png 47][]

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

> 多行超出部分显示省略号

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>

效果图：

![format_png 48][]

### 实例-文字阴影 ###

> 文字阴影 text-shadow

css部分

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

html部分

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

效果图：

![format_png 49][]

### 实例-文字换行 ###

> 文字换行 word-wrap

css部分

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

html部分

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

效果图：

![format_png 50][]

## 总结 ##

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

## 最后 ##

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

欢迎大家加入，一起学习前端，共同进步！  
![cmd-markdown-logo][]  
![cmd-markdown-logo][cmd-markdown-logo 1]

[format_png]: /images/20230528/7cf50420595f4c18af1b68907f5ce977.png
[format_png 1]: /images/20230528/5a1809ca1fa04ee5a42f5d5f9575db17.png
[format_png 2]: /images/20230528/7fcccccb6a534862903d178bb8f04f4c.png
[format_png 3]: /images/20230528/f0fca549e82a4b519a816381b85b1248.png
[format_png 4]: /images/20230528/d5b77676b6c345ef92b4788b76f56909.png
[format_png 5]: /images/20230528/627f723f96444d088126fcada3cd5492.png
[format_png 6]: /images/20230528/ab6a4e75f235458d8622ff5e8ffdd384.png
[format_png 7]: /images/20230528/aa03ea82eb0c437ba2edefff8d13fcf7.png
[format_png 8]: /images/20230528/25f73bf610d148f59ef335da90f9be68.png
[format_png 9]: /images/20230528/98b4cf49c9e84c5c988061a7329d12dd.png
[format_png 10]: /images/20230528/66ade42048f14e09a1dd2f44ac72e768.png
[format_png 11]: /images/20230528/40beb3b2f3614cb896f54a0c6ed6290f.png
[format_png 12]: /images/20230528/cda6342755eb4797a772d976d4e9f523.png
[format_png 13]: /images/20230528/96dcb35729ff434783359edccfab5731.png
[format_png 14]: /images/20230528/72b908acbc2c41edb1642891134eb39e.png
[format_png 15]: /images/20230528/640d33565d5141f09217ef710114aaa2.png
[format_png 16]: /images/20230528/922c43f6cdb34bb3a706ca50cde13d77.png
[format_png 17]: /images/20230528/92970829955e492a9eb58830973dbf05.png
[format_png 18]: /images/20230528/0973dbaafc2e4a6db39308533eda5c05.png
[format_png 19]: /images/20230528/134007df2d50421da3a33677de28bea7.png
[format_png 20]: /images/20230528/78dbf19a199d41aea0cfa69d4489b1a4.png
[format_png 21]: /images/20230528/ee6309fec6024f3583d0a1a5f30a02c6.png
[format_png 22]: /images/20230528/7534899ce173460aac69d72e81fc7749.png
[format_png 23]: /images/20230528/ed13fcdcfdff4f7da5b7ac4b536b72b9.png
[format_png 24]: /images/20230528/176e5d8cbdec424b8cd356f44e82efd6.png
[format_png 25]: /images/20230528/fc1324e32465487eab6c0cbe5d3a47ab.png
[format_png 26]: /images/20230528/07842c636a5c4b9098482bc116fedb6a.png
[format_png 27]: /images/20230528/2d0ff89eaa454f559282fa895dceb962.png
[format_png 28]: /images/20230528/6ed14de3139546bb99fed0b3d0482d33.png
[format_png 29]: /images/20230528/c26d56789023478980a389f72dd55961.png
[format_png 30]: /images/20230528/1d1885912ab64a0c8ae05a9f040c23b2.png
[format_png 31]: /images/20230528/ffe115cbc56c4b8dbed665ab618822d9.png
[format_png 32]: /images/20230528/35394a9a92a74e039d565ef8e7e78299.png
[format_png 33]: /images/20230528/9352ed85154d401082b3ad7ea65dcd24.png
[format_png 34]: /images/20230528/23ea5760e915406eba289621d58a7498.png
[format_png 35]: /images/20230528/d62876a95cbc4630b466c6aa05f2e8e0.png
[format_png 36]: /images/20230528/b2feb9be94b348d4813e99070d6dd2e1.png
[format_png 37]: /images/20230528/e892f7c3c2bd4fd580727ab467b7ee5d.png
[format_png 38]: /images/20230528/50696f692cad4dde88c772c9c88f09d9.png
[format_png 39]: /images/20230528/8d897405487a473eb2a7a44284d6a187.png
[format_png 40]: /images/20230528/03bdca9ad6a640e282c583a8d51b7ab2.png
[format_png 41]: /images/20230528/e00265ab87604082b32c2dc2dfdc077a.png
[format_png 42]: /images/20230528/e7cc64307cfd484ab33be51b3b5c1f54.png
[format_png 43]: /images/20230528/cab1061fa9d34061a96a656e051fe786.png
[format_png 44]: /images/20230528/c171ae80c9be4feb85f3e3dc1fd33f5e.png
[format_png 45]: /images/20230528/de9d674554cb42d9ba8015d9a83e6d32.png
[format_png 46]: /images/20230528/8ebaf749923e47c081524275bf6b800e.png
[format_png 47]: /images/20230528/4a11a6401efe443fb336030dcff59ba9.png
[format_png 48]: /images/20230528/8b377f975a744f3baaa9e0159378539b.png
[format_png 49]: /images/20230528/60a317f7ff4e48548f34f07e9e5e1973.png
[format_png 50]: /images/20230528/a31b11cc5c9949128d2c38fb8d29608a.png
[cmd-markdown-logo]: /images/20230528/d076fd218aeb4eb68a1cbd66a3c7fe5f.png
[cmd-markdown-logo 1]: /images/20230528/848b6a0874674c5381ad28d5857be502.png