美文网首页
css3新特性

css3新特性

作者: getElementsByMK | 来源:发表于2017-06-03 22:33 被阅读0次

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

    相关文章

      网友评论

          本文标题:css3新特性

          本文链接:https://www.haomeiwen.com/subject/zaemfxtx.html