zoukankan      html  css  js  c++  java
  • CSS3新增属性

    CSS3新增了很多的属性:

      1.CSS3边框:

    • border-radius:CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,border-radius 属性用于创建圆角。border:2px solid;
    • box-shadow:CSS3边框阴影。在 CSS3 中,box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;
    • border-image:CSS3边框图片。通过 CSS3 的 border-image 属性,您可以使用图片来创建边框。border-image:url(border.png) 30 30 round;

      2.CSS3背景:

    • background-size: 属性规定背景图片的尺寸。在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
    • background-origin :属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

      3.CSS3文字效果:

    • text-shadow:在 CSS3 中,text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;
    • word-wrap :单词太长的话就可能无法超出某个区域,允许对长单词进行拆分,并换行到下一行:p{word-wrap:break-word;}

      4.CSS3 2D转换:

      transform:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

    • translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:transform:translate(50px,100px);值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
    • rotate():元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
    • scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
    • skew():元素转动给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度,围绕 Y 轴转动 20 度。
    • matrix() :

      matrix() 方法把所有 2D 转换方法组合在一起。

      matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

      5.CSS3 3D转换:

    • rotateX():元素围绕其 X 轴以给定的度数进行旋转。transform:rotateX(120deg);
    • rotateY():元素围绕其 Y 轴以给定的度数进行旋转。transform:rotateY(120deg);

      6.CSS3 过渡:当元素从一种样式变换为另一种样式时为元素添加效果。

      7.CSS3动画:通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

      8.CSS3多列:

    • column-count:属性规定元素应该被分隔的列数。
    • column-gap:属性规定列之间的间隔。
    • column-rule :属性设置列之间的宽度、样式和颜色规则。

      9.CSS3用户界面:

    • resize:属性规定是否可由用户调整元素尺寸。
    • box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容。
    • outline-offset :属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
  • 相关阅读:
    UVA1349 Optimal Bus Route Design 最优巴士路线设计
    POJ3565 Ants 蚂蚁(NEERC 2008)
    UVA1663 Purifying Machine 净化器
    UVa11996 Jewel Magic 魔法珠宝
    NEERC2003 Jurassic Remains 侏罗纪
    UVA11895 Honorary Tickets
    gdb调试coredump(使用篇)
    使用 MegaCLI 检测磁盘状态并更换磁盘
    员工直接坦诚直来直去 真性情
    山东浪潮超越3B4000申泰RM5120-L
  • 原文地址:https://www.cnblogs.com/lxy1023-/p/8674570.html
Copyright © 2011-2022 走看看