【CSS基础笔记】伪元素 伪类 过渡 动画 阴影 渐变 继承

伪元素：

1. 伪元素在DOM树中创建了一些是不存在于文档语言里的抽象元素。

（例如常用的::before,::after::before，::after只有在设置属性：content:""之后才能显示）

【伪元素本质上是创建了一个有内容的虚拟容器；】

1. 伪元素的由两个冒号::开头，然后是伪元素的名称。
2. 一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。（注：不排除未来会加入同时使用多个伪元素的机制。）

 

伪类：

1. 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息和不能被常规CSS选择器获取到的信息。

【伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息，例如 :nth-child:(even){} 对偶数的子元素设置属性。 】

1. 伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
2. 任何常规选择器可以在任何位置使用多个伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。【和伪元素的语法不同】

 

 

 

Transition（过渡的简写属性）：可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover ，:active 或者通过JavaScript实现的状态变化。

默认值	all 0 ease 0
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

 

 

Animation（动画的简写属性）：

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

 

 

Transition（过渡）和animation（动画）的区别：

1. Transition通常是和:hover ，:active配合使用，由动作触发。Animation则是自动执行。
2. Transition只能设定从初始状态渐变到最终状态，无法像Animation一样改变中途的每一帧的样式。
3. Transition搭配Javascript可以实现非常多的动画效果。目前Animation与JS的交互功能还不完善。
4. Animation可以设定循环次数。

 

 

box-shadow（阴影）:

【阴影效果在线编写工具：https://www.cssmatic.com/box-shadow】

 

 

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

 

 

radial-gradient：用来定义径向渐变，以对图形元素进行填充或描边。

【渐变填充在线编写工具：http://www.colorzilla.com/gradient-editor/】

常量	描述
closest-side	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner	渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side	与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
farthest-corner	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

 

 

继承

常见可继承属性：

1. 字体属性
2. 文本属性：text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，Direction，Color
3. 声音属性：speak，speak-punctuation，speak-numeral，speak-header，speech-rate，volume，voice-family，pitch，pitch-range，stress，richness，azimuth，elevation

 

 

常见不可继承属性：

1. 文本属性：vertical-align，text-decoration，text-shadow，white-space，unicode-bidi
2. 盒模型属性：width，height，margin ，margin-top，margin-right，margin-bottom，margin-left，border，border-style，border-top-style，border-right-style，border-bottom-style，border-left-style，border-width，border-top-width，border-right-right，border-bottom-width，border-left-width，border-color，border-top-color，border-right-color，border-bottom-color，border-left-color，border-top，border-right，border-bottom，border-left，padding，padding-top，padding-right，padding-bottom，padding-left
3. 背景属性：background，background-color，background-image，background-repeat，background-position，background-attachment
4. 布局定位属性：float，clear，position，top，right，bottom，left，min-width，min-height，max-width，max-height，overflow，clip，z-index
5. 页面样式属性：size，page-break-before，page-break-after
6. 声音属性：pause-before，pause-after，pause，cue-before，cue-after，cue，play-during
7. 生成内容属性：content，counter-reset，counter-increment

 

转载于:https://www.cnblogs.com/65Seeker/p/9992515.html