css3新特性

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 设置对象内的第一个字符的样式 (只能作用在块元素上)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 总览 边框border-color 属性boder-image 属性border-radius 属性box-sha...
    DecadeHeart阅读 1,035评论 0 9
  • 一.CSS3 Rounded Corners 通过使用CSS3 border-radius属性, 可以得到圆角的效...
    txwslyf阅读 306评论 0 3
  • CSS3 是最新的 CSS 标准,并且完全向后兼容,不过目前W3C 仍然在对 CSS3 规范进行开发,虽然标准的规...
    颭夏阅读 3,927评论 4 42
  • HTML5 1.HTML5新元素 HTML5提供了新的元素来创建更好的页面结构: 标签描述 定义页面独立的内容区域...
    L怪丫头阅读 2,837评论 0 4
  • 减肥一定要配合运动,不管是为了增加身体消耗还是为了身体健康,这都是非常必要的,而且如果你想要最大程度的改善体型,那...
    朵澜一阅读 294评论 0 0