css3复习篇

最新推荐文章于 2024-07-03 11:11:16 发布

砂糖小刀j

最新推荐文章于 2024-07-03 11:11:16 发布

阅读量155

点赞数

分类专栏：复习文章标签： css css3 animation

本文链接：https://blog.csdn.net/jjabcde48/article/details/114702599

版权

复习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

此文章为自我复习，在下学识浅薄，经验不足，文章中可能出现错误或语义不对的地方，欢迎指正。长期更新中（什么时候学到了新的再补充）…

选择器

属性选择器

[attr] 表示存在attr属性即可；
[attr=val] 表示属性值完全等于val；
[attr*=val] 表示在属性值的“任意”位置包含val字符；
[attr^=val] 表示在属性值的“开始”位置包含val字符；
[attr$=val] 表示在属性值的“结束”位置包含val字符；

伪类选择器

:first-child 选择第一个子元素
:last-child 选择最后一个子元素
:nth-child(n) 选择第n个子元素
:nth-last-child(n) 倒序选择第n个子元素

目标伪类选择器

:empty 选中没有任何子节点的元素
:target 结合锚点使用，处于当前锚点的元素会被选中
:not()选中除了当前锚点的其它元素

伪元素选择器

::first-letter 文本的第一个单词或字
::first-line 文本第一行
::selection 可改变选中文本的样式

tip：":“与”::“的区别在于区分伪类和伪元素，在开发中使用”:"

颜色

rgba

红色（r）0 到 255 间的整数，代表颜色中的红色成分。。
绿色（g）0 到 255 间的整数，代表颜色中的绿色成分。
蓝色（b）0 到 255 间的整数，代表颜色中的蓝色成分。
透明度（a）取值 0~1 之间，代表透明度。

hsla

h：色调，取值范围为0~360,0/360表示红色，120绿色，240蓝色
s：饱和度，取值范围为0%~100%
l：亮度，取值范围为0%~100%
a：透明度，取值范围为0~1

关于透明度

opacity只能针对整个盒子设置透明度，纸盒子和内容会继承父盒子的透明度
transparent不可调节透明度，始终完全透明：background-color：transparent
tip：rgba，hsla可以设置颜色的透明度，和opacity比起来，它不具有继承性

文本

text-shadow文字阴影

参1：水平偏移量正值向右负值向左；
参2：垂直偏移量正值向下负值向上；
参3：模糊度（模糊半径）是不能为负值；
参4：颜色

文本域

resize：none
防止文本域被拖拽
outline：none
取消轮廓线

边框

边框图片

border-image
参1：source：图片路径
参2：slice：切割，包含4参数（a,b,c,d）按照上右下左顺序
参3：repeat是否平铺包含三个值：stretch拉伸（默认值）、repeat重复、round平铺
参4：width宽度
参5：偏移位置

盒模型

box-sizing: border-box
border、padding 的设置不会影响元素的宽高

box-sizing: content-box
border、padding 的设置会破坏元素宽高，必须得重新计算

box-shadow属性
取值：水平偏移量、垂直偏移量、模糊度、外延值、color、inset（内阴影）

内边距

内边距会改变盒子大小，元素背景也会延伸到内边距
padding可同时指定四个方向（padding：x x x x;）
也可单独使用
padding-top，padding-…

外边距

外边距不会影响可见框大小，而是影响盒子位置
margin规则同上
外边距也可以设置为负值，向反方向移动
margin：auto水平居中
margin-left：auto移动到最右边，right同理
上下外边距重叠取最大值，左右外边距相加取和
如果父字元素的垂直外边距相邻，则子元素的外边距会设置给父元素

内联元素

内联元素不能设置width和height，但是可以设置内边距，
水平方向内边距会影响页面布局，垂直方向内边距则不会，但是可能会影响显示效果
水平方向外边距不会重叠，不支持垂直方向外边距

背景

background-size

设置背景图片的尺寸
cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
也可以使用长度单位或百分比

background-origin

设置背景定位的原点
border-box 以边框做为原点；
padding-box 以内边距做为原点；
content-box 以内容区做为原点；

渐变

线性渐变

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。
取值：方向、起止色、渐变范围
例如：
在这里插入图片描述

径向渐变

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
取值：圆半径、圆中心、起止色、渐变范围

背景图片位置

background-position可以调整背景图片在元素中的位置
background-attachment：fixed设置背景图片会固定在某一位置，不随页面滚动

过渡

transition-property设置过渡属性
transition-duration设置过渡时间，从旧属性转换到新属性花费的事件
transition-delay设置过渡动画延迟时间
transition-timing-function设置过渡速度

转换

transform：用来设置2D或3D转换
tip：注意写在要变化的元素里，而不是hover里（否则鼠标移开，hover失效，过渡效果直接消失）

2D转换

移动 translate(x, y) 改变元素的位置，相对原来的位置的变化，如果为百分比则是相对于盒子的大小；
translate3d(x,y,z) 3d空间的位置移动
缩放 scale(x, y) 水平和垂直方向的缩放，x、y的取值可为小数，如果只有一个参数即缩放的倍数；
旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；旋转时元素的坐标也会跟着改变
倾斜 skew(Ydeg, Xdeg) 可以使元素按一定的角度进行倾斜，会改变元素的形状

3D转换

transform-style:preserve-3D; 内嵌元素，并且必须经过Z变形（transform）
perspective :元素在转换过程中的视觉效果，(0-1000)设置给父盒子，值越大，效果越不明显，看起来近大远小
backface-visibility 设置元素背面是否可见

动画

在这里插入图片描述

多个动画可以用%来使用
例：
@keyframes go{
0%{}
25%{}
50%{}
…
100%{}
}

animation-name设置动画名称
animation-duration动画持续时间
animation-delay动画延时时间
animation-timing-function动画执行速度，linear（匀速）、ease等
animation-play-state动画播放状态，play、paused（暂停）、running等
animation-direction动画播放方向，默认值normal
alternate动画逆播（动画先正向播放再反向播放）
animation-fill-mode动画执行完毕后状态
forwards（结束时的状态）
backwards（执行之前的状态）
animation-iteration-count动画执行次数
infinite（无限次）
steps(60) 表示动画分成60步完成