1、渐变

1.1 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

　　background: linear-gradient(direction, color-stop1, color-stop2, ...);

1.2 径向渐变（Radial Gradients）- 由它们的中心定义

　　background: radial-gradient(center, shape size, start-color, ..., last-color);

2、转换

2.1  2D 转换

1）translate() 方法：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

2）rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

3）scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

4）skew() 方法，包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

5）matrix(n,n,n,n,n,n)：定义 2D 转换，使用六个值的矩阵。

2.2  3D 转换

1） rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

2） rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

3）属性：

4）方法

3、过渡

　　CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

　　要实现这一点，必须规定两项内容：

　　指定要添加效果的CSS属性

　　指定效果的持续时间。

　　例：div { transition: width 2s; }

　　

练习：鼠标移上去时改变宽高，背景，并旋转

代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>过渡</title>

		<style>

			.box{width: 300px;height: 300px;background: lightseagreen;transition: 1s;}

			.box:hover{width: 400px;height: 400px;background: #286CC9;transform:rotateY(180deg);}

		</style>

	</head>

	<body>

		<div class="box"></div>

	</body>

</html>

4、动画

　　动画是使元素从一种样式逐渐变化为另一种样式的效果。

　　可以改变任意多的样式任意多的次数。

　　请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

　　0% 是动画的开始，100% 是动画的完成。

　　实际用时：首先定义一个动画，然后作用到元素上。

4.1 示例

@keyframes myfirst {

from {background: red;}

to {background: yellow;}

}

div { animation: myfirst 5s; }

4.2 动画属性

5、多列（简单了解）

column-count

column-gap

column-rule-style

column-rule-width

column-rule-color

column-rule

column-span

column-width

6、用户界面

6.1 resize属性指定一个元素是否应该由用户去调整大小

　　div { resize:both; overflow:auto; }

6.2 box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

6.3 outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

7、弹性盒子(Flex Box)

7.1 定义

　　弹性盒子是 CSS3 的一种新的布局模式。

　　CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

　　引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

7.2 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

　　弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

7.3 Flex在移动端开发中应用较多，会使页面布局更加简洁，显示更友好，用户体验更好。例如，比较难实现的垂直居中，用flex可以轻松实现。

具体可以查看这两篇文章：

Flex布局语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex布局实例篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

8、多媒体查询

语法：

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) { CSS 代码...; }

个人体会：css3可以让页面变的更加丰富多彩，让页面动起来。属性很多，最好的学习方法就是实践，每个属性试一下效果，就能明白了。

css3相关样式的更多相关文章

  1. CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）

    CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽 ...

  2. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  3. css盒子模型 css3盒子相关样式

    1.内边距(内边距在content外,边框内) 内边距属性: padding          设置所有边距 padding-bottom     底边距 padding-left           ...

  4. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  5. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  6. css文字与文本相关样式

    css文字属性定义文本的字体系列,大小,加粗,风格和变形   font-family          设置字体系列 font-size          设置字体的尺寸 font-style     ...

  7. css3-4 css3边框样式

    css3-4 css3边框样式 一.总结 一句话总结: 二.css3边框样式 1.相关知识 边框属性:1.border-width2.border-style3.border-color 边框方位:1 ...

  8. css3-3 css3背景样式

    css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...

  9. web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

    12.  文字和字体相关样式 12.1  CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...

随机推荐

  1. 洛谷 P2962 [USACO09NOV]灯Lights

    题目描述 Bessie and the cows were playing games in the barn, but the power was reset and the lights were ...

  2. javaCV入门指南：序章

    前言 从2016年6月开始写<javacv开发详解>系列,到而今的<javacv入门指南>,虽然仅隔了两年多时间,却也改变了很多东西. 比如我们的流媒体技术群从刚开始的两三个人 ...

  3. Ubuntu 获得超级用户权限

    sudo passwd root 首先要先输入当前用户的密码,再在"输入新的UNIX密码"后面输入你想要设置的 root 密码即可,然后就可以切换到 super user 了: $ ...

  4. POCO库中文编程参考指南（8）丰富的Socket编程

    POCO库中文编程参考指南(8)丰富的Socket编程 作者:柳大·Poechant 博客:Blog.CSDN.net/Poechant 邮箱:zhongchao.ustc#gmail.com (# ...

  5. Python之常用模块（一）

      time & datatime 模块 random os sys shutil json & picle   time & datetime 时间戳(1970年1月1日之后 ...

  6. NativeScript官方书籍：NativeScript in Action-用你现有技术构建移动应用程序

    大家好,我用nativescript做企业级移动应用开发一年多了.从最初只能看nativescript英文文档,到现在看到官方发布正式的书籍,感觉nativescript变得越来越好. 当然,在这个过 ...

  7. JSP 标准标签库（JSTL）(菜鸟教程)

    菜鸟教程 JSTL 1.1 与 JSTL 1.2 之间的区别?如何下载 JSTL 1.2? JSTL 1.2 中不要求 standard.jar 包. 您可以在 Maven 中央仓库中找到它们. ht ...

  8. [转] 无监督特征学习——Unsupervised feature learning and deep learning

    from:http://blog.csdn.net/abcjennifer/article/details/7804962 无监督学习近年来很热,先后应用于computer vision, audio ...

  9. [Xcode 实际操作]六、媒体与动画-(4)使用CoreImage框架更改图片的色相

    目录:[Swift]Xcode实际操作 本文将演示如何使用CoreImage框架,调整图片的色相. 通过调整图像的色相,使图像产生暖色效果. 在项目导航区,打开视图控制器的代码文件[ViewContr ...

  10. Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法

    (1)概括          一句话概括:根据显示屏幕宽度的大小,自动的选用对应的类的样式. (2)关键字段        1.col是column简写:列: 2.xs是maxsmall简写:超小,  ...