zoukankan      html  css  js  c++  java
  • CSS3新增的属性有哪些:

    CSS 用于控制网页的样式和布局。

    CSS3 是最新的 CSS 标准。

    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 :属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

     以上呢,就是我对CSS3新增的一些属性的了解,希望对学习的大家有所帮助。

  • 相关阅读:
    Combine 框架,从0到1 —— 4.在 Combine 中使用计时器
    Combine 框架,从0到1 —— 4.在 Combine 中使用通知
    Combine 框架,从0到1 —— 3.使用 Subscriber 控制发布速度
    Combine 框架,从0到1 —— 2.通过 ConnectablePublisher 控制何时发布
    使用 Swift Package Manager 集成依赖库
    iOS 高效灵活地配置可复用视图组件的主题
    构建个人博客网站(基于Python Flask)
    Swift dynamic关键字
    Swift @objcMembers
    仅用递归函数操作逆序一个栈(Swift 4)
  • 原文地址:https://www.cnblogs.com/xkweb/p/5862612.html
Copyright © 2011-2022 走看看