css3新增了什么新特性？

圈圈同学
155 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

1、颜色

新增RGBA,HSLA模式

  • RGBA(R,G,B,A),此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。

  • R：红色值，正整数值的取值范围为：0 - 255，百分数值的取值范围为：0.0% - 100.0%。

  • G：绿色值，正整数值的取值范围为：0 - 255，百分数值的取值范围为：0.0% - 100.0%。

  • B：蓝色值，正整数值的取值范围为：0 - 255，百分数值的取值范围为：0.0% - 100.0%。

  • A：Alpha透明度。取值0~1之间。

2、文字阴影

  • 语法: text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
text-shadow: h-shadow v-shadow blur color;

image.png

3、边框

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象

  • 圆角：border-radius
  • 边框图像：border-image
  • 边框阴影：box-shadow

4、盒子模型

css盒子模型 又称框模型 (Box Model) ，包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。

属性

box-sizing : content-box|border-box|inherit;

  • content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。即总宽度=margin+border+padding+width

  • border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容。即总宽度=margin+width

  • inherit , 规定应从父元素继承 box-sizing 属性的值

5、背景

css3新增加背景属性，提供更大背景元素控制

  • 添加背景图片： background-image
  • 指定背景图像的大小： background-size
  • 指定了背景图像的位置区域： background-origin
  • 背景剪裁属性： background-clip

6、渐变

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

  • linear-gradient：线性渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

  • radial-gradient：径向渐变

linear-gradient(0deg, red, green);

7、过渡

transition 属性是一个简写属性，用于设置四个过渡属性：

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

8、变形

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

  • 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
  • 3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
  • 3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
  • 3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()

9、自定义动画

animation 属性是一个简写属性，用于设置六个动画属性

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

10、媒体查询

使用@media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式。

11、字体图标

在CSS3 中，新增了自定义字体的内容，可以让我们自己定义一个字体，然后放到服务器上，这样尽管用户的操作系统中没有该字体，也会从服务器下载到指定的字体，不会影响用户体验。

<style> 
/* 使用 @font-face 来指定一个自定义的字体 */
    @font-face { 
        font-family: "Custom font";  /* 字体名称 */ 
        src: url("fonts/Courier New.ttf"); /* 字体的位置 */ 
    } 
    p { 
        font-family: "Custom font";   /* 设置自定义字体 */ 
        font-size: 20px; /* 字体大小 */ 
    } 
</style> 
<body> 
    <p>Hello, word...</p>
</body>

12、弹性布局

  • 语法
display:flex;
属性描述
flex-direction指定弹性容器中子元素排列方式
flex-wrap设置弹性盒子的子元素超出父容器时是否换行
flex-flowflex-direction 和 flex-wrap 的简写
align-items设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-content修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
justify-content设置弹性盒子元素在主轴（横轴）方向上的对齐方式

栅格布局

  • 语法,指定一个容器采用网格布局
display: grid
avatar
文章
阅读
粉丝