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. idea的项目中output框出现乱码

    找到tomcat的安装目录中的logging.properties 我的在这里:E:\tools\tomcat\apache-tomcat-8.5.38\conf 改其中的参数 修改前  java.u ...

  2. 一个APP开发有那么难吗?

    app开发 idea:产品设计喵有一个想法. 人员配置: 攻城狮:前端后端服务器齐撸 产品设计:设计原型/UI效果图(界面/交互)齐撸] 流程分析: 1.产品设计喵反复打磨自己的想法,明确要做什么样的 ...

  3. python3 pymysql学习笔记

    练手项目需要用到mysql就顺手把mysql也学了,这个模块没什么好说的,比较简单,实际整个过程我都是在学mysql语句,但还是发现了一些问题. fetchall() 获取结果集中的所有行 这个函数难 ...

  4. ZBrush中如何实现智能对称

    ZBrush软件智能化和人性化的工作流程让用户在创作中提高工作效率,体验创作乐趣,说起智能化不得不提的就是ZBrush 4R8®给我们提供的智能对称功能,所谓的智能对称就是当您在编辑其中一半的物体模型 ...

  5. Hihocoder1350-Binary Watch

    时间限制:10000ms单点时限:1000ms内存限制:256MB 描述 Consider a binary watch with 5 binary digits to display hours ( ...

  6. JDBC程序实例

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

  7. Java基础——Servlet

    什么是Servlet Servlet是Java Web的三大组件之一,它属于动态资源.Servlet的作用是处理请求,服务器会把接收到的请求交给Servlet来处理,在Servlet中通常需要: l  ...

  8. Python 函数部分练习题

    函 数 基 础 1.写函数,,用户传入修改的文件名,与要修改的内容,执行函数,完成批了修改操作2.写函数,计算传入字符串中[数字].[字母].[空格] 以及 [其他]的个数 3.写函数,判断用户传入的 ...

  9. thinkPHP利用ajax异步上传图片并显示、删除

    近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...

  10. 20130910.Windows上安装和配置MongoDB

    官方文档:http://docs.mongodb.org/manual/tutorial/ 1.下载软件 http://www.mongodb.org/downloads 2.解压 解压后进入bin目 ...