css3新增属性

时间:2020-05-01

CSS3 边框

你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。

  • border-radius 用于创建圆角
  • box-shadow 用来添加阴影
  • border-image 使用图像创建一个边框

CSS3 背景

  • background-image 添加背景图片
  • background-size  指定背景图像的大小
  • background-origin 指定了背景图像的位置区域
  • background-clip 从指定位置开始绘制

CSS3 渐变(Gradients)

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
  • 径向渐变(Radial Gradients)- 由它们的中心定义

CSS3 文本效果

  • text-shadow 用于文本阴影
  • box-shadow 用于盒子阴影
  • text-overflow 文本溢出属性指定应向用户如何显示溢出内容
  • word-wrap 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字
  • word-break 单词拆分换行属性指定换行规则

CSS3 字体

@font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

CSS3 2D 转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

  • translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动
  • rotate() 在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转
  • scale() 该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数
  • skew() 包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜
  • matrix() 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能

CSS3 3D 转换

  • rotateX() 围绕其在一个给定度数X轴旋转的元素
  • rotateY() 围绕其在一个给定度数Y轴旋转的元素

CSS3 过渡

CSS3 动画

@keyframes 规则是创建动画。 

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS3 多媒体查询

  • viewport(视窗) 的宽度与高度
  • 设备的宽度与高度
  • 朝向 (智能手机横屏,竖屏) 。
  • 分辨率