一文讲清楚CSS3新特性

一文讲清楚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景象线变

3. 新增布局方式

• 包括flex布局，Grid布局，媒体查询等， 看我的这几篇文章
• https://blog.csdn.net/xiaobangkeji/article/details/144829721
• https://blog.csdn.net/xiaobangkeji/article/details/144834010
• https://blog.csdn.net/xiaobangkeji/article/details/144835580
• https://blog.csdn.net/xiaobangkeji/article/details/144852599