迅闻网
让更多人看到你

css3有哪些新特性(css3新增属性)

  css3有哪些新特性

简单来说,css便是层叠款式表,是一种用来表现HTML或XML等文件款式的计算机语言。而css3便是最新的CSS规范。只需咱们能把握了css、css3的各种款式特点,信任咱们随心制造漂亮大方的页面都是不在话下的。
已然css3是css最新规范,那么css3都有哪些新特性呢?
下面咱们结合简单代码示例,为咱们总结几个重要的新特性即新增特点!
一、RGBA和透明度
RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个alpha通道,即除了红绿蓝三种色彩外还增加一个代表透明度的通道,其中RGB值别离表明赤色、绿色、蓝色,而alpha取值则为0到1(小数位一位)。
二、background特点
background-image:设置元素的布景图画。
background-origin:规定布景图片的定位区域。
background-size:规定布景图片的尺度。
background-repeat:设置是否及如何重复布景图画。
三、word-wrap特点
word-wrap特点答应长单词或URL地址换行到下一行。
注:所有干流浏览器都支持word-wrap特点。
根底语法:
word-wrap:normal|break-word;
四、text-shadow特点
text-shadow特点:向文本设置暗影。
text-shadow根底语法:
text-shadow:5px5px5px#FF0000;
参数别离表明:水平暗影,笔直暗影,含糊距离,暗影色彩;
五、font-face特点
font-face特点:界说自己的字体
在新的@font-face规则中,您必须首先界说字体的称号(比如myFirstFont),然后指向该字体文件。
六、border-radius特点
border-radius特点:是一个简写特点,用于设置四个border-*-radius特点。
根底语法:
border-radius:1-4length|%/1-4length|%;
注:该特点答应您为元素添加圆角边框!
七、border-image特点
border-image:将图片规定为包围div元素的边框
border-image根底语法:
border-image:url(border.png)3030round
八、box-shadow特点
box-shadow特点:向框添加一个或多个暗影。(盒暗影)
box-shadow根底语法:
box-shadow:10px10px5px#888888
九、媒体查询
媒体查询界说两套css,当浏览器的尺度改变时会选用不同的特点。

css

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有哪些新特性(css3新增属性)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

迅闻网-让更多人看到你

登录/注册返回首页