css3新特性

2017-06-03  本文已影响0人  getElementsByMK

1.css3中有哪些新的特性?

边框

1.border-color 属性
2.boder-image 属性
3.border-radius 属性
2.box-shadow

布局

1.弹性布局:display

背景

1.background-origin 属性
2.background-clip 属性
3.background-size 属性

(background-origin属性用来决定如何在盒模型中计算background-position的值。
此属性有三种取值:border-box、padding-box和content-box。如果你使用了padding-box,则背景的位置计算会相对于内边距区域的左上角;border-box则相对于边框的左上角;content-box则相对于其内容的左上角。基于Gecko或Webkit的浏览器使用了过时的规范版本,其取值为border、padding和content。

background-clip属性用来决定背景是否要扩展到边框里。默认值是border-box,即扩展到边框里。但如果将其赋值padding-box则不会。如果你使用content-box则背景只会在有内容的矩形区域显示(这个可选值已经在最近的规范中去掉了)。

background-size用来决定背景图片的大小,默认是auto,图片的真实大小;
cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
)

文字效果

1.text-shadow 属性
2.text-overflow 属性
3.word-wrap 属性(normal: 允许内容顶开或溢出指定的容器边界。
break-word: 内容将在边界内换行。如果需要,单词内部允许断行。)

选择器

属性(attribute)选择器

动画效果

5.转换:transform
6.过渡:transition
7.动画:animation

2.css3的伪元素有哪些?

1.::before 设置在对象前发生的内容
2.::ofter 设置在对象后发生的内容
3.::placeholder 用于控制表单输入框占位符的外观(input::-webkit-input-placeholder {

color: #999;

})
4.::selection 定义被选择时的background-color,color及text-shadow等属性(IE11不支持)
5.::first-line 设置对象内的第一行的样式 (只能作用在块元素上)
6.::first-letter 设置对象内的第一个字符的样式 (只能作用在块元素上)

上一篇下一篇

猜你喜欢

热点阅读