CSS3基础

最新推荐文章于 2017-11-01 17:16:16 发布

humaopei040602

最新推荐文章于 2017-11-01 17:16:16 发布

阅读量222

点赞数

本文链接：https://blog.csdn.net/humaopei040602/article/details/48718841

版权

CSS3基础知识
一、背景属性
     1.background-clip：用于指定背景的显示范围。
    (1)background-clip: border;背景在border边框下开始显示

    (2)background-clip: padding;背景在padding下开始显示，而不是border边框下开始

    (3)background-clip: content;背景在内容区域下开始显示，而不是border边框下开始或padding下开始。
       2.background-origin：background-origin 属性规定 background-position 属性相对于什么位置来定位。
二、文本属性
    clip ：默认值。不显示省略标记(...)，而是简单的裁切.
    ellipsis：当对象内文本溢出时显示省略标记(...)。
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
box{width:100px;background-color:#87CEEB;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    </style>
    </head>
    <body>
    <div id="box">注意：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
    </div>
    </body>
注意：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
三、CSS32D转换
     属性tansform
    1.transform:rotate()：含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”
    2.transform:skew()：含义：倾斜；
    3.transform:scale()：
    含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。
    4.transform:translate()：移动
四、CSS3 3D转换
    3D transform中有下面这三个方法：
    rotateX(  )
    rotateY(  )
    rotateZ(  )