您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页css扩展/CSS3

css扩展/CSS3

来源:二三娱乐

CSS3 边框

属性 说明
设置所有边框图像的速记属性。
一个用于设置所有四个边框- *-半径属性的速记属性
附加一个或多个下拉框的阴影

CSS3 圆角属性

属性 描述
所有四个边角 border---radius 属性的缩写
定义了左上角的弧度
定义了右上角的弧度
定义了右下角的弧度
定义了左下角的弧度

新的背景属性

顺序 描述
规定背景的绘制区域。
规定背景图片的定位区域。
规定背景图片的尺寸。

新文本属性

属性 描述
规定标点字符是否位于线框之外。
规定是否对标点字符进行修剪。
设置如何对齐最后一行或紧挨着强制换行符之前的行。
向元素的文本应用重点标记以及重点标记的前景色。
规定当 text-align 设置为 "justify" 时所使用的对齐方法。
规定文本的轮廓。
规定当文本溢出包含元素时发生的事情。
向文本添加阴影。
规定文本的换行规则。
规定非中日韩文本的换行规则。
允许对长的不可分割的单词进行分割并换行到下一行。

新转换属性

以下列出了所有的转换属性:

Property 描述
适用于2D或3D转换的元素
允许您更改转化元素位置

2D 转换方法

函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

转换属性

下表列出了所有的转换属性:

属性 描述
向元素应用 2D 或 3D 转换。
允许你改变被转换元素的位置。
规定被嵌套元素如何在 3D 空间中显示。
规定 3D 元素的透视效果。
规定 3D 元素的底部位置。
定义元素在不面对屏幕时是否可见。

3D 转换方法

函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

过渡属性

下表列出了所有的过渡属性:

属性 描述
简写属性,用于在一个属性中设置四个过渡属性。
规定应用过渡的 CSS 属性的名称。
定义过渡效果花费的时间。默认是 0。
规定过渡效果的时间曲线。默认是 "ease"。
规定过渡效果何时开始。默认是 0。

CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性:

属性 描述
规定动画。
所有动画属性的简写属性,除了 animation-play-state 属性。
规定 @keyframes 动画的名称。
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
规定动画的速度曲线。默认是 "ease"。
规定动画何时开始。默认是 0。
规定动画被播放的次数。默认是 1。
规定动画是否在下一周期逆向地播放。默认是 "normal"。
规定动画是否正在运行或暂停。默认是 "running"。

CSS3 多列属性

下表列出了所有 CSS3 的多列属性:

属性 描述
指定元素应该被分割的列数。
指定如何填充列
指定列与列之间的间隙
所有 column-rule-* 属性的简写
指定两列间边框的颜色
指定两列间边框的样式
指定两列间边框的厚度
指定元素要跨越多少列
指定列的宽度
设置 column-width 和 column-count 的简写

新的用户界面特性

属性 说明 CSS
允许您使一个元素的外观像一个标准的用户界面元素 3
允许你以适应区域而用某种方式定义某些元素 3
为创作者提供了将元素设置为图标等价物的能力。 3
指定在何处使用箭头向下导航键时进行导航 3
指定一个元素的Tab的顺序 3
指定在何处使用左侧的箭头导航键进行导航 3
指定在何处使用右侧的箭头导航键进行导航 3
指定在何处使用箭头向上导航键时进行导航 3
外轮廓修饰并绘制超出边框的边缘 3
指定一个元素是否是由用户调整大小 3

CSS3 弹性盒子属性

下表列出了在弹性盒子中常用到的属性:

属性 描述
指定 HTML 元素盒子类型。
指定了弹性容器中子元素的排列方式
设置弹性盒子元素在主轴(横轴)方向上的对齐方式。
设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
设置弹性盒子的子元素超出父容器时是否换行。
修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
flex-direction 和 flex-wrap 的简写
设置弹性盒子的子元素排列顺序。
在弹性子元素上使用。覆盖容器的 align-items 属性。
设置弹性盒子的子元素如何分配空间。
描述
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕,平板,智能手机等。
speech 用于屏幕阅读器

CSS3 多媒体类型

描述
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕,平板,智能手机等。
speech 用于屏幕阅读器

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务