CSS3中有哪些新特性

芒果茶叶
175 阅读4分钟

1. 新增选择器

  • 属性选择器
  • 结构伪类选择器
  • 伪元素选择器

2. 转换：transform

2D转换：

  • 位移：transform：translate（100px，100px）
  • 缩放：transform：scale（1，1）
  • 旋转：transform：rotate（45deg）
  • 倾斜：transform：skew（-9deg，0deg）

3D转换：

  • 位移：transform：translate（100px，100px，100px）
  • 旋转：transform：rotate（0，0，1，45deg）
  • 3D呈现：transform-style
    flat：子元素不开启3d空间
    preserve-3d：子元素开启3d空间
  • 透视：perspective（单位px）
    人的眼睛到屏幕的距离；近大远小

3. 动画：animation

  • @keyframes 动画名称 {0% {width：100px} 100% {width：200px}} animation也有很多的属性：
    animation-name：动画名称
    animation-duration：动画持续时间
    animation-timing-function：动画时间函数
    animation-delay：动画延迟时间
    animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
    animation-direction：动画执行方向
    animation-paly-state：动画播放状态
    animation-fill-mode：动画填充模式

4. 过渡：transition

可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。 transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：

  • 过度效果
  • 持续时间
语法如下：
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

上面为简写模式，也可以分开写各个属性
transition-property: width; 
transition-duration: 1s; 
transition-timing-function: linear; 
transition-delay: 2s;

5. 边框

CSS3新增了三个边框属性，分别是：

  • border-radius：圆角
  • box-shadow：盒阴影
  • border-image：使用图片来绘制边框

6. 背景

新增了四个关于背景的属性，分别是：

  • background-clip：用于确定背景画区
    background-clip: no-clip; 默认属性，等同于border-box
    background-clip: border-box; 背景从border开始显示
    background-clip: padding-box; 背景从padding开始显示
    background-clip: content-box; 背景显content区域开始显示
  • background-origin：用于确定背景图片的左上角对齐位置
    background-origin: border-box; 从border开始计算background-position
    background-origin: padding-box; 从padding开始计算background-position，默认属性
    background-origin: content-box; 从content开始计算background-position
  • background-size：用来调整背景图片的大小，主要用于设定图片本身
    background-size: contain; 缩小图片以适合元素（维持像素长宽比）
    background-size: cover; 扩展元素以填补元素（维持像素长宽比）
    background-size: 100px 100px; 缩小图片至指定的大小
    background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包含元素的尺寸
  • background-break：元素可以被分成几个独立的盒子（如使内联元素span跨越多行），该属性用来控制背景怎样在这些不同的盒子中显示
    background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
    background-break: bounding-box; 把盒之间的距离计算在内；
    background-break: each-box; 为每个盒子单独重绘背景

7. 文字

  • text-shadow：文本阴影特效。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
  • text-decoration：CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：
    text-fill-color: 设置文字内部填充颜色
    text-stroke-color: 设置文字边界填充颜色
    text-stroke-width: 设置文字边界宽度
  • word-wrap: normal | break-word
    normal：使用浏览器默认换行处理
    break-word：允许在长单词或 URL 地址内部进行换行
  • text-overflow：设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择：
    clip：修剪文本
    ellipsis：显示省略符号来代表被修剪的文本

8. 颜色与渐变

CSS3增加了新的颜色表示方式rgba与hsla

  • rgba分为两部分，rgb为颜色值，a为透明度
  • hsla分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

颜色渐变是指在两个颜色之间平稳的过渡，CSS3渐变包括

  • linear-gradient：线性渐变 -> background-image: linear-gradient(direction, color1, color2, ...);
  • radial-gradient：径向渐变 -> radial-gradient(0deg, red, green);

9. 其他特性

  • 图片模糊：filter：blur（5px）数值越大越模糊
  • calc函数：width：calc（100% - 80px）用于动态计算长度值
  • flex弹性布局
  • Grid栅格布局
  • 多列布局
  • 媒体查询
  • 混合模式......
avatar
文章
阅读
粉丝