css3新增属性有哪些
css3新增属性有:word-wrap、word-break、text-shadow、border-radius、box-shadow、border-image、background-size、transform、transition等。
本教程操作环境:windows7系统、CSS3版、Dell G3电脑。
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新增属性有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

纯CSS3怎么实现波浪效果?本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法,希望对大家有所帮助!

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

在css中,可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框,即给边框加上背景图片,只需要将背景图片指定为花边样式即可;语法“border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;”。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

在css3中,可以利用“animation-timing-function”属性设置动画旋转速度,该属性用于指定动画将如何完成一个周期,设置动画的速度曲线,语法为“元素{animation-timing-function:速度属性值;}”。

css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。
