CSS3知识点

一、CSS3新特性及核心知识
- （一）新增选择器
- （二）新增的用户界面属性
- （三）常用的样式属性边框和盒阴影
- （四）CSS3背景新特性及精灵图片的使用
- （五）详细讲解CSS3渐变背景
- （六）CSS3文本效果及特殊字体引入
- （七）CSS3的多列布局
- （八）设备兼容必备知识多媒体查询
二、CSS3特效
- （一）2D转换动画效果
- （二）3D转换动态效果
- （三）CSS3过渡实用技巧
- （四）CSS3动画特效技能

一、CSS3新特性及核心知识

（一）新增选择器

。。。。有点多

（二）新增的用户界面属性

resize属性规定是否可以调整元素尺寸

none 默认值⽆无法调整元素的尺寸
both 可调整元素的⾼度和宽度
horizontal 可调整元素的宽度
vertical 可调整元素的高度

box-sizing属性改变盒子模型的组成方式，以下是该属性的三个值：

content-box 默认值 padding和border不计入width和height内
border-box padding和border计⼊width和height内
inherit 继承父元素的box-sizing属性的值

outline-oﬀset属性设置轮廓框架在border边缘外的偏移 outline与border有两点不同：

outline不占用空间 outline可能是非矩形

（三）常用的样式属性边框和盒阴影

CSS3圆⻆角属性border-radius：被用于创建圆角

border-radius属性每个半径四个值的顺序分别是左上角，右上角，右下角，左下角

可传的值如下：

length：定义圆形半径或椭圆的半长轴，半短轴。负值无效。
percentage：使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值⽆无效。
/斜杆分隔写法，斜杆左边的值为水平半轴，右边值垂直半轴

CSS3盒阴影属性box-shadow：被用来添加阴影

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

h-shadow：必需的。水平阴影的位置。允许负值
v-shadow：必需的。垂直阴影的位置。允许负值
blur：可选。模糊距离
spread：可选。阴影的⼤⼩
color：可选。阴影的颜色。
inset：可选。阴影向内扩散

CSS3图片边框属性border-image：指定⼀个图片作为边框

例题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .radius {
            width: 300px;
            height: 500px;
            background: #ff0000;
            border-radius: 20px 10px;
        }
        .shadow {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            box-shadow: 5px 5px 5px 5px red inset;
        }
        .borderImg {
            width: 300px;
            height: 200px;
            border: 15px solid transparent;
            border-image: url('border.png') 27 / 20px / 10px repeat;//路径 切割图片 图片宽度 边框向外偏移 重复（strech round）
        }
    </style>
</head>
<body>
    <!-- <div class="radius"></div> -->
    <!-- <div class="shadow"></div> -->
    <div class="borderImg">css3图片边框borderImg</div>
</body>
</html>

（四）CSS3背景新特性及精灵图片的使用

background-image：添加背景图片

可添加多个背景，每张图片用，逗号隔开，前面的图片会绘制在后面的图片上

background-size：设置背景图片的大小，可传的值如下：

< length> 值，指定背景图片大小，不能为负值。
< percentage> 值，指定背景图片相对背景区（background positioning area）的百分比。
< auto> 值，以背景图片的比例缩放背景图片。
< cover> 值，缩放背景图片以完全覆盖背景区。
< contain> 值，按原有宽高⽐例缩放背景图片以完全装入背景区。

background-origin：指定背景图片的位置，可传的值如下

border-box：背景图片的摆放以border区域为参考

padding-box：默认值背景图片的摆放以padding区域为参考

content-box：背景图片的摆放以content区域为参考

注意：当使用为ﬁxed时，该属性将被忽略不起作用。

background-clip：指定从哪个位置开始绘制，可传的值如下

border-box：默认值，背景延伸至边框外沿（但是在边框下层）。 padding-box：背景延伸至内边距（padding）外沿。不会绘制到边框处。 content-box：背景被裁剪至内容区（content box）外沿。

例题：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
   .backgroundImg {
     width: 300px;
     height: 200px;
     padding: 10px;
     border: 10px solid transparent;
     background-image: url('border.png');
     background-repeat: no-repeat;
     background-size:cover;
     background-origin: content-box;
   }
   .backgroundImg2 {
    width: 300px;
     height: 200px;
     padding: 10px;
     border: 10px solid transparent;
     background-image: url('border.png');
     /* background-clip: text; */
     margin: 10px;
   }
   .sprite {
     width: 27px;
     height: 27px;
     background-image: url('border.png');
     background-repeat: no-repeat;
     background-position: -27px 0;
   }
  </style>
</head>
<body>
   <!-- <div class="backgroundImg"></div> -->
   <!-- <div class="backgroundImg2">css3背景新特性</div> -->
   <div class="sprite"></div>
</body>
</html>

（五）详细讲解CSS3渐变背景

1.线性渐变（linear-gradient）

标准语法：background: linear-gradient(direction, color-stop1, color-stop2, …);

direction:渐变的方向，默认情况是从上到下

标准语法方向是渐变的末尾位置，其他浏览器前缀语法是渐变的起始位置

注意：标准语法要放在其他浏览器语法后面

角度渐变：标准语法0度指向北，其他浏览器前缀语法指向东

换算公式：90-标准语法角度=其他浏览器前缀语法⻆度

CSS3知识点整理一、CSS3新特性及核心知识二、CSS3特效

重复的线性渐变：repeating-linear-gradient()

2.径向渐变（radial-gradient）

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

CSS3知识点整理一、CSS3新特性及核心知识二、CSS3特效

重复径向渐变：repeating-radial-gradient()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .linearGradient {
      width: 300px;
      height: 200px;
      /* background: -webkit-linear-gradient(90deg,red 10%,blue 50%,yellow); */
      /* background: linear-gradient(0deg,red 10%,blue 50%,yellow); */
      background: repeating-linear-gradient(45deg,yellow,red 10%,blue 20%)
    }
    .radialGradient {
      width: 300px;
      height: 200px;
      /* background: radial-gradient(circle farthest-side at bottom,red,blue,yellow) */
      background: repeating-radial-gradient(red,yellow 10%,blue 20%)
    }
  </style>
</head>
<body>
  <!-- <div class="linearGradient"></div> -->
  <div class="radialGradient"></div>
</body>
</html>

（六）CSS3文本效果及特殊字体引入

text-shadow：给文本添加阴影效果

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。⽔平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

text-overﬂow：指定当⽂本溢出包含它的元素的形式

text-overflow: clip|ellipsis|string;

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使⽤给定的字符串来代表被修剪的⽂本。(只在ﬁrefox浏览器器有效)

word-wrap：属性允许内容在过长情况下可以自动换行。

word-wrap: normal|break-word;

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换⾏。

word-break：指定内容的断行规则。

word-break: normal|break-all|keep-all;

值	描述
normal	使⽤浏览器默认的换行规则。
break-all	允许在单词内换⾏。
keep-all	只能在半⻆空格或连字符处换⾏。

@font-face 规则：定义⾃己的文本字体

首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

提示：URL请使用小写字母的字体，大写字母在IE中会产生意外的结果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    @font-face {
      font-family: myFont;
      src: url('Dexsar.otf'),
      url('Dexsar.ttf')
    }
    .textShadow {
      text-shadow: 2px 2px 2px red;
    }
    .textOverflow {
      width: 100px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: '等';
    }
    .wordWrap {
      width: 160px;
      /* word-wrap: break-word; */
      /* word-break: break-all; */
      word-break: keep-all;
      font-family: myFont
    }
  </style>
</head>
<body>
  <!-- <div class="textShadow">
    css3文本阴影
  </div> -->
  <!-- <div class="textOverflow">
    css3文本溢出kldjfkldjkfl
  </div> -->
  <div class="wordWrap">
    thisislong哈哈worddddddddddddddddd
  </div>
</body>
</html>

（七）CSS3的多列布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .colCount {
      width: 400px;
      /* -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3; //指定分割的列数*/
      column-gap: 40px;//指定列与列的间隙
      /* column-rule-style: solid;//列与列的边框样式
      column-rule-width: 10px;//边框厚度
      column-rule-color: red; */
      column-rule: 10px solid red;//以上三个的缩写
      column-width: 100px;//列的宽度
    }
  </style>
</head>
<body>
  <div class="colCount">
      “知道我和唐僧什么区别吗 唐僧取经我娶你” “莫文蔚的阴天，孙燕姿的雨天，周杰伦的晴天，都不如你和我聊天。”
      “你知道你和星星的区别吗？星星点亮了黑夜，而你点亮了我的心”
  </div>
</body>
</html>

（八）设备兼容必备知识多媒体查询

使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

//⼤于480px
@media screen and (min-width: 480px) { 
	body {
		background-color: red;
	}
}
//大于960px小于1200px
@media screen and (min-width:960px) and (max-width:1200px){ 
	body{
		background:yellow;
	}
}

二、CSS3特效

（一）2D转换动画效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .transform {
      width: 300px;
      height: 200px;
      background: red;
      margin: 50px;
      /* transform: translate(100px,200px);// x轴y轴上的平移*/
      /* transform: translateX(100px);
      transform: translateY(200px); */

      /* transform: rotate(-30deg);  //旋转 正顺时针 负逆时针*/

      /* transform: scale(2,2); //缩放根据中心圆点 */

      transform: skew(-30deg,20deg)//倾斜 x轴y轴倾斜的角度
    }
  </style>
</head>
<body>
    <div class="transform"></div>
</body>
</html>

（二）3D转换动态效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      transform-style: preserve-3d
    }
    .tf{
      width: 100px;
      height: 100px;
      background: red;
      transform:translate3d(50px,50px,100px); //x,y,z,z为面向屏幕方向
    }
    .tf2 {
      width: 100px;
      height: 100px;
      background: yellow;
      transform: translate3d(0,0,50px);
    }
    .rotate {
      width: 100px;
      height: 100px;
      background: red;
      transition: all 2s;
    }
    .rotate:hover {
      /* transform: rotateX(180deg); //沿着X轴3D旋转*/
      transform: rotateY(180deg);//沿着Y轴3D旋转
    }
  </style>
</head>
<body>
  <!-- <div class="tf"></div>
  <div class="tf2"></div> -->
  <div class="rotate">hellow</div>
</body>
</html>

（三）CSS3过渡实用技巧

CSS3 过渡是元素从一种样式逐渐改变为另⼀种的效果。

transition: property duration timing-function delay;

值	描述
transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

transition-property属性

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应⽤过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-timing-function属性

值	描述
linear	规定以相同速度开始⾄至结束的过渡效果。
ease	默认值。规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in	规定以慢速开始的过渡效果。
ease-out	规定以慢速结束的过渡效果。
ease-in-out	规定以慢速开始和结束的过渡效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .test {
      width: 100px;
      height: 100px;
      background: red;
      margin: 20px;
    }
    .test:hover {
      width: 200px;
      height: 200px;
    }
    .test1 {
      transition: all 2s ease 2s;
    }
    .test2 {
      transition: all 2s linear;
    }
    .test3 {
      transition: all 2s ease-in;
    }
    .test4 {
      transition: all 2s ease-out;
    }
    .test5 {
      transition: all 2s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="test test1">css3过渡</div>
  <div class="test test2">css3过渡</div>
  <div class="test test3">css3过渡</div>
  <div class="test test4">css3过渡</div>
  <div class="test test5">css3过渡</div>
</body>
</html>

（四）CSS3动画特效技能

CSS3 @keyframes规则

@keyframes规则内指定⼀个CSS样式和动画将逐步从目前的样式更改为新的样式。

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

值	说明
animation-name	指定动画的名称
animation- duration	动画需要多少秒或毫秒完成
animation- timing-function	设置动画将如何完成⼀个周期
animation-delay	设置动画在启动前的延迟间隔。
animation- iteration-count	定义动画的播放次数。
animation- direction	指定是否应该轮流反向播放动画。
animation-ﬁll- mode	规定当动画不播放时（当动画完成时，或当动画有⼀个延迟未开始播放时），要应⽤到元素的样式。
animation-play- state	指定动画是否正在运行或已暂停。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .test {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      border-radius: 50%;
      animation: myAnimation 5s linear 2s both;
    }

    .test:hover {
      animation-play-state: paused;
    }

    @keyframes myAnimation {
      from {background:yellow;left: 50px;}
      to {left:100px;}
    }
  </style>
</head>
<body>
  <div class="test">css3动画</div>
</body>
</html>

CSS3知识点整理一、CSS3新特性及核心知识二、CSS3特效

CSS3知识点

一、CSS3新特性及核心知识

（一）新增选择器

（二）新增的用户界面属性

（三）常用的样式属性边框和盒阴影

（四）CSS3背景新特性及精灵图片的使用

（五）详细讲解CSS3渐变背景

（六）CSS3文本效果及特殊字体引入

（七）CSS3的多列布局

（八）设备兼容必备知识多媒体查询

二、CSS3特效

（一）2D转换动画效果

（二）3D转换动态效果

（三）CSS3过渡实用技巧

（四）CSS3动画特效技能

继续阅读

关于:first-child的误区

flex弹性布局中的flex：1的理解

flex弹性盒模型及flex-grow与flex-shrink的计算

Flex布局及属性

深入CSS vertical-align属性

给背景图片添加超链接

去除div的滚动条但是依然可以滚动的方法

modern-normalize vs normalize.css

弹性web UI的核心：媒体查询

CSS3 ---奔跑的小人

【CSS3】设置超链接样式超链接样式

分享几个常用的css网站前言一、CSS 参考网站二、CSS 参考网站三、CSS集合，自由调节动画参数，生成代码片段：五、通过做饭，练习 CSS 选择器六、送小青蛙回家，学习 flex 布局总结

HTML CSS 的鼠标悬浮，点击的样式当鼠标悬浮时：a:hover当鼠标点击链接时：a:active

谈谈css的伪类和伪元素

十大酷炫屌的图像悬停特效

vue3 transitionvue3 transition组件和vue2 transition组件