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新增的一些属性的了解,希望对学习的大家有所帮助。

CSS3新增的属性有哪些:的更多相关文章

  1. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css3新增的属性有哪些

    徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...

  3. css3新增的属性 - 分享

    CSS3新增属性   一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...

  4. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  5. CSS3新增基础属性总结——20160409(易达客)

    1.box-shadow :h-shadow v-shadow blur spread color inset(outset) h-shadow:必须:水平阴影位置,允许负值. v-shadow:必须 ...

  6. Css3 新增的属性以及使用

    Css3基础操作 . Css3? css3事css的最新版本 width. heith.background.border**都是属于css2.1CSS3会保留之前 CSS2.1的内容,只是添加了一些 ...

  7. css3新增的属性选择器

    使用css选择器,可以实现一个样式对应多个html文档的元素,在{}前面的部分就是"选择器",指明了样式的作用对象. 在CSS中追加了三个属性选择器:[att*=val].[att ...

  8. css3新增的属性

    由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀, 如:-moz-       firefox火狐 -ms-         IE ...

  9. Css3新增背景属性

    1.background-origin 背景的起始位置 background-origin: border-box || padding-box || content-box; 案例初始化: 代码: ...

随机推荐

  1. px 与 pt

    px:pixel,像素,屏幕上显示的最小单位,用于网页设计,直观方便: pt:point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用: em:即%,在CSS中,1em=100 ...

  2. onTouchEvent事件

    @Override public boolean onTouchEvent(MotionEvent event) { if(event.getAction() == MotionEvent.ACTIO ...

  3. input输入框只允许输入数字

    /* input输入框只允许输入数字*/ <input type="text" onkeypress="keyPress()" > function ...

  4. JDBC程序实例

    实例 ( Statement ): public class JDBC { public static void main(String[] args) throws Exception { Conn ...

  5. python安装Redis数据库

    where pip cd 切换这个目录 pip install redis import redis r = redis.Redis(host='127.0.0.1', port=6379) user ...

  6. CSS布局总结(一)

    前言:今天是学校为期六周的实训第一天,实训课感觉很水,第一天讲的竟然是HTML...实训老师丢了一个静态页面给我们做.感觉很久没写过这种东西,突然觉得自己的基本功很渣.布局这方面感觉需要总结一下,然后 ...

  7. python_函数、局部变量与全局变量

    #函数优点:代码重用.保持一致性.可扩展性import time def logger(): """时间年-月-日 分""" time_fo ...

  8. Spring Boot 启动的时候遇到 java.lang.ClassNotFoundException: ch.qos.logback.classic.Level

    在刚开始接触spring boot的时候,想创建一个Hello World 的project. 但是创建完之后,Run as 'Spring Boot APP'的时候遇到这个错误. Level类存在于 ...

  9. 【转】C语言将字符串转换成对应的数字(十进制、十六进制)

    转自:http://wawlian.iteye.com/blog/1315133 1.一个十进制数字的字符串表示转换成对应的整数.举例:将“1234”转换成整数1234 /*将字符串s转换成相应的整数 ...

  10. Java二维码打印

    http://blog.csdn.net/OnePersonTZ/article/details/66560513