温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css3中的新增属性有哪些

发布时间:2021-04-02 17:39:08 来源:亿速云 阅读:355 作者:Leah 栏目:web开发

这篇文章将为大家详细讲解有关css3中的新增属性有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

css3新增属性有:word-wrap、word-break、text-shadow、border-radius、box-shadow、border-image、background-size、transform、transition等。

css3新增属性

1、CSS3文字效果:

  • hanging-punctuation:规定标点字符是否位于线框之外。

  • punctuation-trim:规定是否对标点字符进行修剪。

  • text-align-last:设置如何对齐最后一行或紧挨着强制换行符之前的行。

  • text-emphasis:向元素的文本应用重点标记以及重点标记的前景色。

  • text-justify:规定当 text-align 设置为 "justify" 时所使用的对齐方法。

  • text-outline:规定文本的轮廓。

  • text-overflow:规定当文本溢出包含元素时发生的事情。

  • text-shadow:向文本添加阴影。

  • text-wrap:规定文本的换行规则。

  • word-break:规定非中日韩文本的换行规则。

  • word-wrap:允许对长的不可分割的单词进行分割并换行到下一行。

2、CSS3边框:

  • border-radius:CSS3圆角边框。

  • box-shadow:用于向方框添加阴影。

  • border-image:CSS3边框图片,可以使用图片来创建边框。

3、CSS3背景:

  • background-size:属性规定背景图片的尺寸。

  • background-origin:属性规定背景图片的定位区域。

  • background-clip:规定背景的绘制区域。

(学习视频分享:css视频教程)

4、CSS3 转换:

  • transform 向元素应用 2D 或 3D 转换。

  • transform-origin 允许你改变被转换元素的位置。

  • transform-style 规定被嵌套元素如何在 3D 空间中显示。

  • perspective 规定 3D 元素的透视效果。

  • perspective-origin 规定 3D 元素的底部位置。

  • backface-visibility 定义元素在不面对屏幕时是否可见。

5、CSS3 过渡:

当元素从一种样式变换为另一种样式时为元素添加效果。

  • transition:简写属性,用于在一个属性中设置四个过渡属性。

  • transition-property:规定应用过渡的 CSS 属性的名称。

  • transition-duration:定义过渡效果花费的时间。默认是 0。

  • transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。

  • transition-delay:规定过渡效果何时开始。默认是 0。

6、CSS3动画:通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

  • @keyframes:规定动画。

  • animation:所有动画属性的简写属性,除了 animation-play-state 属性。

  • animation-name:规定 @keyframes 动画的名称。

  • animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0。

  • animation-timing-function:规定动画的速度曲线。默认是 "ease"。

  • animation-delay:规定动画何时开始。默认是 0。

  • animation-iteration-count:规定动画被播放的次数。默认是 1。

  • animation-direction:规定动画是否在下一周期逆向地播放。默认是 "normal"。

  • animation-play-state:规定动画是否正在运行或暂停。默认是 "running"。

  • animation-fill-mode:规定对象动画时间之外的状态。

7、CSS3多列:

  • column-count:指定元素应该被分割的列数。

  • column-fill:指定如何填充列

  • column-gap:指定列与列之间的间隙

  • column-rule: 所有 column-rule-* 属性的简写

  • column-rule-color:指定两列间边框的颜色

  • column-rule-style:指定两列间边框的样式

  • column-rule-width:指定两列间边框的厚度

  • column-span:指定元素要跨越多少列

  • column-width:指定列的宽度

  • columns:设置 column-width 和 column-count 的简写

8、CSS3用户界面:

  • resize:属性规定是否可由用户调整元素尺寸。

  • box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容。

  • outline-offset:属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

  • appearance:允许您使一个元素的外观像一个标准的用户界面元素。

  • icon:为创作者提供了将元素设置为图标等价物的能力。

  • nav-down:指定在何处使用箭头向下导航键时进行导航。

  • nav-index:指定一个元素的Tab的顺序。

  • nav-left:指定在何处使用左侧的箭头导航键进行导航。

  • nav-right:指定在何处使用右侧的箭头导航键进行导航。

  • nav-up:指定在何处使用箭头向上导航键时进行导航。

关于css3中的新增属性有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI