CSS3

2020-12-16 本文已影响0人 Lee_Han_

浏览器前缀？

浏览器厂商以前就一直在实施CSS3,但是他还未成为真正的标准，为此，当一些CSS3样式语法还在波动的时候，他们提出了针对浏览器的前缀。

CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新的浏览器基本上不需要加前缀。

浏览器	内核	前缀
IE	Trident	-ms-
FireFox	Gecko	-moz-
Opear	Presto	-o-
Chrome	Webkit	-webkit-
Safari	Webkit	-webkit-
Opera、Chrome	Blink

transition 过渡

transition-property：规定设置过渡的CSS属性的名称

transition-duration：规定完成过渡修熬过需要的多少秒或毫秒

transition-delay：定义过渡效果何时开始（延迟：正数；提前：负数；）

transition-timing-function；规定速度效果的速度曲线（linear：匀速；ease：逐渐慢下来；ease-in：加速；ease-out：减速；ease-in-out：先加速后减速；cubic-bezier：贝尔曲线；）

复合写法：transition:属性过渡时间延迟或提前时间运动规律;

注意：不要写在hover上

transform 变形

translate : 位移 translatX translateY translateX(3d)

scale : 缩放 scaleX scaleY scaleZ(3d)

rotate : 旋转 (单位:deg) rotateX(3d) rotateY(3d) rotateZ (和rotate是等价的关系，正值是顺时针旋转，负值是逆时针旋转)

skew : 斜切
skewX: (单位--deg 正值向左倾斜，负值向右倾斜。)
skewY

==transform的注意事项==

1、变形操作不会影响到其他元素。

2、变形只能添加给块元素。

3、复合写法，可以同时添加多个变形操作。
执行是顺序的。先执行后面的操作，再执行前面的操作。translate会受到 rotate、scale、skew的影响。

animation 动画

animation-name：设置动画的名字（自定义的）

animation-duration：动画持续的时间

animation-delay：动画的延迟时间

animation-iteration-count：动画的重复次数，默认值就是1，infinite就是无限

animation-timing-function：动画的运动形式。

==注意==

1、运动结束后,默认会停留在起始位置。
2、form <==> 0% to <==> 100%
3、复合样式：animation:动画（@keyframes）名 持续时间 延迟时间 重复次数 运动形式

animation-fill-mode

规定动画播放前后，其动画效果是否可见。

none（默认值）：在运动结束后回到初始的位置，在延迟的情况下，让0%在延迟之后生效。

backwards：在延迟的情况下，让0%在延迟前生效。

forwards：在运动结束后，停留在结束的位置

both：backwards和forwards同时生效。

animation-direction

属性定义是否应用该轮流反向播放动画

alternate：一次正向（0% ~ 100%），一次反向（100% ~ 0%）

reverse：永远都是反向，从100% ~ 0%

normal（默认值）：永远都是正向，从0% ~ 100%；

animate.css

一款强大的预设css3动画库

基本使用：
    animated：基类（基础的样式，每个动画效果都需要加）
    infinite：动画的无限次数
<link rel="stylesheet" href="animate.css">
<img src="" alt="" class="animated swing infinite" />

3D

transform
rotateX() ： 正值向上翻转
rotateY() ： 正值向右翻转
translateZ() ：正值向前，负值向后
scaleZ() ：立体元素的厚度

3d写法
    scale3d() : 三个值 x y z
    translate3d() : 三个值 x y z
    rotate3d() : 四个值 
    0|1（x轴是否添加旋转角度），
    0|1（y轴是否添加旋转角度），
    0|1（z轴是否添加旋转角度），
    deg

perspective:离屏幕多远的距离去观察元素，值越大幅度越小。
perspective-origin：景深-基点位置，观察元素的角度
transform-origin：x y z（z轴只能写数值）
transform-style：3D空间
    flat(默认值2d)、preserve-3d(3d,产生一个三维空间)
backface-visibility：背景隐藏
    hidden、visible(默认值)

css3新增背景（图）样式

background-size：背景图尺寸大小
    cover：覆盖
    contain：包含
background-origin：背景图的填充位置
    padding-box（默认）
    border-box
    content-box
background-clip：背景图的剪裁方式
    padding-box
    border-box（默认）
    content-box
注：复合样式中，第一个是位置 第二个是裁切

渐变

linear-gradient:线性渐变 是值 需要添加到background-image属性上
    point || angle
    color
    percentage
注：渐变的0deg是在元素的底部
radial-gradient：径向渐变
    point
    color
    percentage

文字阴影

text-shadow
x
y
blur
color
多阴影
注：阴影的默认颜色是字体颜色

盒子阴影

box-shadow
x
y
blur
spread
color
inset
多阴影
注：盒子阴影的默认颜色是黑色的
注：默认就是外阴影 如果设置outset不起作用。可选值只有inset

mask遮罩

url
repeat
x
y
w
h
多遮罩

注：mask目前是一个比较新的属性 需要加浏览器前缀
注：默认x y 都平铺

倒影

box-reflect
    above
    below
    left
    right
    距离
    遮罩|渐变

注：box-reflect目前是一个比较新的属性 需要加浏览器前缀
注：渐变只是针对透明度
注：通过transform:scale(-1) 也可以实现倒影效果

模糊

blur
    filter:blur()

计算

calc

分栏布局

column-count:分栏的个数
column-width:分栏的宽度
column-gap:分栏的间距
column-rule:芬兰的边线
column-span:合并分栏

注：分栏的宽度和分栏的个数不要一起设置

伪类和伪元素

在CSS2.1中对伪类和伪元素的区别比较模糊。CSS3中对这两个概念做了相对比较清晰地解释，并且语法上也做了比较明显的区分。

CSS3中规定伪类由一个冒号开始，然后为伪类的名称；

伪元素由两个冒号开始，然后为伪元素的名称。

伪类：
    伪类本质上是为了弥补常规的CSS选择器的不足，以便获取到更多的信息。通常表示获取不存在于DOM树中的信息，或获取不能被常规CSS选择器获取的信息。
        :hover
        :focus
        :empty
        ...

伪元素：
    伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素添加样式。
        ::selection
        ::first-line / first-letter
        ::before / after

CSS Hack

CSS Hack 用来解决浏览器的兼容问题，为不同版本的浏览器制定编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。

Hack分类
    1、CSS属性前缀法
        属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
    2、选择器前缀法
        选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有有些特定浏览器才能识别的前缀进行hack
    3、IE条件注释法
        这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式 IE10以上已经不支持注释法

CSS属性前缀法

前缀标识	兼容浏览器
_（属性名前）	IE6
+、*（属性名前）	IE6、IE7
\9（属性值后）	IE6、IE7、IE8、IE9
\0（属性值后）	IE8、IE9、IE10、IE11

选择器前缀法

前缀标识	兼容浏览器
*html	IE6
*+html	IE7
:root	IE9以及现代浏览器

IE条件注释法

前缀标识	兼容浏览器
< !--[if IE]>...<![endif]-->	IE
< !--[if IE 7]>...<![endif]-->	IE7
< !--[if Ite IE 7]>...<![endif]-->	IE7以下
< !--[if !IE 7]>...<![endif]-->	非IE7

注：
    let 小于等于
    gte 大于等于

IE低版本常见BUG

由于就浏览器在设计上有很多缺陷，导致一些BUG的产生，所以针对这些问题需要作出兼容处理。

常见兼容问题

1、透明度
    opacity IE8及以下版本不识别
    filter:alpha(opacity=50)//取值是0-100
2、双边距
    IE6 浏览器在元素浮动的状态下 margin为两倍边距
    _display:inline;
3、最小高度
    IE6 最小高度是19px
    overflow:hidden
4、图片边框
    IE10以下 在img被a标签包裹的时候会出现边框
    border:none;

渐进增强和优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级的浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

CSS3

浏览器前缀？

transition 过渡

transform 变形

==transform的注意事项==

animation 动画

==注意==

animation-fill-mode

规定动画播放前后，其动画效果是否可见。

animation-direction

属性定义是否应用该轮流反向播放动画

animate.css

一款强大的预设css3动画库

3D

css3新增背景（图）样式

渐变

文字阴影

盒子阴影

mask遮罩

倒影

模糊

计算

分栏布局

伪类和伪元素

CSS Hack

CSS属性前缀法

选择器前缀法

IE条件注释法

IE低版本常见BUG

常见兼容问题

渐进增强和优雅降级

猜你喜欢

热点阅读