当前位置：首页 > article >正文

一文讲清楚CSS3新特性

article 2025/1/4 10:05:26

文章目录

一文讲清楚CSS3新特性
1. 新增选择器特性
2. 新增的样式
3. 新增布局方式

一文讲清楚CSS3新特性

1. 新增选择器特性

层次选择器(div~p)选择前面有div的p元素
伪类选择器
- :first-of-type 表示⼀组同级元素中其类型的第⼀个元素
- :last-of-type 表示⼀组同级元素中其类型的最后⼀个元素
- :only-of-type 表示没有同类型兄弟元素的元素
- :only-child 表示没有任何兄弟的元素
- :nth-child(n) 根据元素在⼀组同级中的位置匹配元素
- :nth-last-of-type(n) 匹配给定类型的元素，基于它们在⼀组兄弟元素中的位置，从末尾开始计数
- :last-child 表示⼀组兄弟元素中的最后⼀个元素
- :root 设置HTML⽂档
- :empty 指定空的元素
- :enabled 选择可⽤元素
- :disabled 选择被禁⽤元素
- :checked 选择选中的元素
- :not(selector) 选择与不匹配的所有元素
属性选择器
[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

2. 新增的样式

border-radius,设置圆角边框
border-image,设置图片边框
box-shadow,为元素添加阴影
background-clip,确定背景画区
background-origin，设置图片的左上角对齐方式
background-size,设置背景图片的大小
background-break，设置背景分裂的方式
word-wrap，设置单词的换行方式，normal,整词换行；break-word，词内换行
text-overflow,设置文本溢出的显示方式，clip，截断；ellipsis,截断并用…代替
text-shadow，添加文本阴影
text-decoration,text-fill-color，设置文字内部填充颜色；text-stroke-color;设置文字边界填充颜色；text-stroke-width,设置文字边界宽度
新增rgba颜色方式，=RGB+opacity
新增hala颜色方式，h为色相，s为饱和度，l为亮度，a为透明底
transition过度，transition：css属性，花费时间，效果曲线，延迟时间；css属性=transition-property；花费时间=transition-duration；效果曲线=transition-timing-function；延迟时间=transition-delay
transform变化
- translate(px,px)位移
- scale(1,03)缩放
- rotate（02.turn）旋转
- skew（30deg，20deg）倾斜
animation动画
- animation-name:动画名称
- animation-duration：动画持续时间
- animation-timing-function：动画时间函数
- animation-delay：动画延迟时间
- animation-iteration-count：动画执行次数
- animation-direction：动画执行方向
- animation-play-state:动画播放状态
- animation-fill-mode：动画填充模式
linear-gradient线性渐变
radial-gradient景象线变