学会CSS3中的这几招，屌丝也能逆袭成为前端大神！

小灰灰 2022-03-15 09:35 259阅读 0赞

> CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。如果大家喜欢[湮顾千古][Link 1]的文章，可以关注我的专栏 [HTML5和CSS3的前世今生][HTML5_CSS3]

# CSS3给我们带来的影响 #

CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。浏览器也将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许你实现新的设计效果（比如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。

# CSS3的前世今生 #

## [1.CSS3新增的伪类选择器][1.CSS3] ##

## [2.CSS3的字体和文本相关属性][2.CSS3] ##

## [3.CSS3的背景、边框和边距相关属性][3.CSS3] ##

## [4.CSS3新增的渐变背景][4.CSS3] ##

## [5.CSS3的大小、定位、轮廓相关属性][5.CSS3] ##

## [6.CSS3新增的用户界面和滤镜属性][6.CSS3] ##

## [7.HTML5+CSS3自制特效 | ul li横排显示效果、一闪一闪亮晶晶的动画特效、圆球分支斜线、圆形轨迹移动][7.HTML5_CSS3_ _ ul li] ##

# CSS3的总结 #

## 1.CSS3选择器 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70][]

## 2.CSS3边框 ##

通过CSS3可以创建圆角边框，向矩形添加阴影，使用图片来绘制边框等。

<table> 
 <tbody> 
  <tr> 
   <td>border-image</td> 
   <td>设置所有边框图像的速记属性(边界图片)。</td> 
  </tr> 
  <tr> 
   <td>border-radius&nbsp;</td> 
   <td>一个用于设置所有四个边框(创建圆角)。</td> 
  </tr> 
  <tr> 
   <td>box-shadow</td> 
   <td>&nbsp;附加一个或多个下拉框的阴影(盒阴影)。</td> 
  </tr> 
 </tbody> 
</table>

## 3.CSS3背景 ##

CSS3中包含了多个新的背景属性，它们提供了对背景更强大的控制。

<table> 
 <tbody> 
  <tr> 
   <td>background-image</td> 
   <td>可以添加多个背景图片。</td> 
  </tr> 
  <tr> 
   <td>background-size</td> 
   <td>指定背景图像的大小。</td> 
  </tr> 
  <tr> 
   <td>background-origin</td> 
   <td>指定了背景图像的位置区域。</td> 
  </tr> 
  <tr> 
   <td>background-clip</td> 
   <td>规定背景的绘制区域(剪裁属性是从指定位置开始绘制)。</td> 
  </tr> 
 </tbody> 
</table>

## 4.CSS3渐变 ##

CSS3渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。

<table> 
 <tbody> 
  <tr> 
   <td>线性渐变</td> 
   <td>向下/向上/向左/向右/对角方向。</td> 
  </tr> 
  <tr> 
   <td>径向渐变</td> 
   <td>由它们的中心定义。</td> 
  </tr> 
 </tbody> 
</table>

## 5.CSS3文本效果 ##

<table> 
 <tbody> 
  <tr> 
   <td>text-shadow</td> 
   <td>用于文本阴影</td> 
  </tr> 
  <tr> 
   <td>box-shadow</td> 
   <td>适用于盒子阴影。</td> 
  </tr> 
  <tr> 
   <td>text-overflow</td> 
   <td>CSS3文本溢出属性指定应向用户如何显示溢出内容。</td> 
  </tr> 
  <tr> 
   <td>word-wrap</td> 
   <td>自动换行属性允许您强制文本换行(CSS3的换行)。</td> 
  </tr> 
  <tr> 
   <td>word-break</td> 
   <td>CSS3单词拆分换行。</td> 
  </tr> 
 </tbody> 
</table>

## 6.CSS3字体 ##

<table> 
 <tbody> 
  <tr> 
   <td>@font-face</td> 
   <td> <p>&nbsp;当你需要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。</p> </td> 
  </tr> 
 </tbody> 
</table>

## 7.CSS3的2D转换 ##

通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

**2D 转换方法**

<table> 
 <tbody> 
  <tr> 
   <td>translate()</td> 
   <td>根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。</td> 
  </tr> 
  <tr> 
   <td>rotate()</td> 
   <td>在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。</td> 
  </tr> 
  <tr> 
   <td>scale()</td> 
   <td>该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。</td> 
  </tr> 
  <tr> 
   <td>skew()</td> 
   <td>skewX(&lt;angle&gt;);表示只在X轴(水平方向)倾斜 || skewY(&lt;angle&gt;)表示只在Y轴(垂直方向)倾斜。</td> 
  </tr> 
  <tr> 
   <td>matrix()</td> 
   <td>matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。</td> 
  </tr> 
 </tbody> 
</table>

**语法示例：**

transform:translate(150px,100px);

## 8.CSS3的3D转换 ##

CSS3允许使用3D转换来对元素进行格式化，使元素改变形状、尺寸和位置的一种效果。

**3D 转换方法：**

<table> 
 <tbody> 
  <tr> 
   <td>rotateX()</td> 
   <td>围绕其在一个给定度数X轴旋转的元素。</td> 
  </tr> 
  <tr> 
   <td>rotateY()</td> 
   <td>围绕其在一个给定度数Y轴旋转的元素。</td> 
  </tr> 
 </tbody> 
</table>

**语法示例：**

transform:rotateX(130deg);

## 9.CSS3动画 ##

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。

**动画属性：**

<table> 
 <tbody> 
  <tr> 
   <td>@keyframes</td> 
   <td>规定动画。</td> 
  </tr> 
  <tr> 
   <td>animation</td> 
   <td>所有动画属性的简写属性，除了 animation-play-state 属性。</td> 
  </tr> 
  <tr> 
   <td>animation-name</td> 
   <td>规定 @keyframes 动画的名称。</td> 
  </tr> 
  <tr> 
   <td>animation-duration</td> 
   <td>规定动画完成一个周期所花费的秒或毫秒，默认是 0。</td> 
  </tr> 
  <tr> 
   <td>animation-timing-function</td> 
   <td>规定动画的速度曲线，默认是 ease。</td> 
  </tr> 
  <tr> 
   <td>animation-delay</td> 
   <td>规定动画何时开始，默认是 0。</td> 
  </tr> 
  <tr> 
   <td>animation-iteration-count</td> 
   <td>规定动画被播放的次数，默认是 1。</td> 
  </tr> 
  <tr> 
   <td>animation-direction</td> 
   <td>规定动画是否在下一周期逆向地播放，默认是 normal。</td> 
  </tr> 
  <tr> 
   <td>animation-play-state</td> 
   <td>规定动画是否正在运行或暂停，默认是 running。</td> 
  </tr> 
  <tr> 
   <td>animation-fill-mode</td> 
   <td>规定对象动画时间之外的状态。</td> 
  </tr> 
 </tbody> 
</table>

**语法示例：**

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        animation:myfirst 5s;
        -moz-animation:myfirst 5s; /* Firefox */
        -webkit-animation:myfirst 5s; /* Safari and Chrome */
        -o-animation:myfirst 5s; /* Opera */
    }
    @keyframes myfirst
    {
        from {background:red;}
        to {background:yellow;}
    }
    @-moz-keyframes myfirst /* Firefox */
    {
        from {background:red;}
        to {background:yellow;}
    }
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        from {background:red;}
        to {background:yellow;}
    }
    @-o-keyframes myfirst /* Opera */
    {
        from {background:red;}
        to {background:yellow;}
    }
    </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

## 10.CSS3多列 ##

通过CSS3的多列学习，能够创建多个列来对文本进行布局，就像报纸那样。

**多列属性：**

<table> 
 <tbody> 
  <tr> 
   <td>columns</td> 
   <td>设置column-width和column-count 的简写。</td> 
  </tr> 
  <tr> 
   <td>column-width</td> 
   <td>指定了列的宽度。</td> 
  </tr> 
  <tr> 
   <td>column-count</td> 
   <td>指定了需要分割的列数(创建多列)。</td> 
  </tr> 
  <tr> 
   <td>column-rule</td> 
   <td>设置了列直接的边框的厚度，样式及颜色。</td> 
  </tr> 
  <tr> 
   <td>column-rule-style</td> 
   <td>指定了列与列间的边框样式(列边框)。</td> 
  </tr> 
  <tr> 
   <td>column-rule-width</td> 
   <td>指定了两列的边框厚度。</td> 
  </tr> 
  <tr> 
   <td>column-rule-color</td> 
   <td>指定了两列的边框颜色。</td> 
  </tr> 
  <tr> 
   <td>column-gap</td> 
   <td>指定了列与列间的间隙(列间隙)。</td> 
  </tr> 
 </tbody> 
</table>

## 11.CSS3用户界面 ##

新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

**新用户界面的特性：**

<table> 
 <tbody> 
  <tr> 
   <td>appearance</td> 
   <td>允许您使一个元素的外观像一个标准的用户界面元素。</td> 
  </tr> 
  <tr> 
   <td>box-sizing</td> 
   <td>允许你以适应区域而用某种方式定义某些元素。</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>为创作者提供了将元素设置为图标等价物的能力。</td> 
  </tr> 
  <tr> 
   <td>nav-down</td> 
   <td>指定在何处使用箭头向下导航键时进行导航。</td> 
  </tr> 
  <tr> 
   <td>nav-index</td> 
   <td>指定一个元素的Tab的顺序。</td> 
  </tr> 
  <tr> 
   <td>nav-left</td> 
   <td>指定在何处使用左侧的箭头导航键进行导航。</td> 
  </tr> 
  <tr> 
   <td>nav-right</td> 
   <td>指定在何处使用右侧的箭头导航键进行导航。</td> 
  </tr> 
  <tr> 
   <td>nav-up</td> 
   <td>指定在何处使用箭头向上导航键时进行导航。</td> 
  </tr> 
  <tr> 
   <td>outline-offset</td> 
   <td>外轮廓修饰并绘制超出边框的边缘。</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>指定一个元素是否是由用户调整大小。</td> 
  </tr> 
 </tbody> 
</table>

## 12.CSS3图片 ##

### 12.1 圆角图片 ###

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

### 12.2 缩略图 ###

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

### 12.3 响应式图片 ###

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

### 12.4 图片滤镜 ###

img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }

### 12.5 响应式图片相册 ###

@media only screen and (max-width: 700px){
        .responsive {
            width: 49.99999%;
    		margin: 6px 0;
        }
    }

## 13.CSS3框大小 ##

CSS3box-sizing属性可以设置width和height属性中包含了padding(内边距) 和 border(边框)。在不使用box-sizing的情况下，元素的宽度与高度计算方式如下：

width(宽) + padding(内边距) + border(边框) = 元素实际宽度
    height(高) + padding(内边距) + border(边框) = 元素实际高度

这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。这种方式如果想要获得较小的那个框且包含内边距，就不得不考虑到边框和内边距的宽度。使用CSS3 box-sizing属性实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）。

## 14.CSS3弹性盒子 ##

CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

**弹性盒子属性：**

<table> 
 <tbody> 
  <tr> 
   <td>display</td> 
   <td>指定HTML元素盒子类型。</td> 
  </tr> 
  <tr> 
   <td>flex-direction</td> 
   <td>指定了弹性容器中子元素的排列方式。</td> 
  </tr> 
  <tr> 
   <td>justify-content</td> 
   <td>设置弹性盒子元素在主轴（横轴）方向上的对齐方式。</td> 
  </tr> 
  <tr> 
   <td>align-items</td> 
   <td>设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。</td> 
  </tr> 
  <tr> 
   <td>flex-wrap</td> 
   <td>设置弹性盒子的子元素超出父容器时是否换行。</td> 
  </tr> 
  <tr> 
   <td>align-content</td> 
   <td>修改flex-wrap属性的行为，类似align-items, 但不是设置子元素对齐，而是设置行对齐。</td> 
  </tr> 
  <tr> 
   <td>flex-flow</td> 
   <td>flex-direction和flex-wrap的简写。</td> 
  </tr> 
  <tr> 
   <td>order</td> 
   <td>设置弹性盒子的子元素排列顺序。</td> 
  </tr> 
  <tr> 
   <td>align-self</td> 
   <td>在弹性子元素上使用，覆盖容器的align-items属性。</td> 
  </tr> 
  <tr> 
   <td>flex</td> 
   <td>设置弹性盒子的子元素如何分配空间。</td> 
  </tr> 
 </tbody> 
</table>

## 15.CSS3多媒体查询 ##

CSS3的多媒体查询继承了CSS2多媒体类型的所有思想：取代了查找设备的类型，CSS3根据设置自适应显示。媒体查询可用于检测很多事情，例如：viewport(视窗) 的宽度与高度、设备的宽度与高度、朝向 (智能手机横屏，竖屏) 、分辨率等。

**查询语法：**

520px到699px宽度：@media screen and (max-width: 699px) and (min-width: 520px){}
    700px到1000px宽度：@media screen and (max-width: 1000px) and (min-width: 700px) {}
    大于1001px宽度：@media screen and (min-width: 1001px) {}
    大于1151px宽度：@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {}

\------------如果大家喜欢[湮顾千古][Link 1]的博客，可以点击左上角的关注哦。

[Link 1]: https://blog.csdn.net/sujin_
[HTML5_CSS3]: https://blog.csdn.net/column/details/21881.html
[1.CSS3]: https://blog.csdn.net/sujin_/article/details/83374093
[2.CSS3]: https://blog.csdn.net/sujin_/article/details/83449835
[3.CSS3]: https://blog.csdn.net/sujin_/article/details/86480055
[4.CSS3]: https://blog.csdn.net/sujin_/article/details/86701674
[5.CSS3]: https://blog.csdn.net/sujin_/article/details/86677939
[6.CSS3]: https://blog.csdn.net/sujin_/article/details/87019970
[7.HTML5_CSS3_ _ ul li]: https://blog.csdn.net/sujin_/article/details/88078719
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70]: /images/20220315/84fdea34246644e18b5d178f0b4331ab.png