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. Stamps

    链接 分析:dp[i][j]表示前i个数,组成j,最少需要多少个.dp[i][j]=min(dp[i-1][j],dp[i-1][j-k*v[i]]+k),则可以转化为完全背包问题,同样的方法进行降维 ...

  2. bzoj 3267: KC采花&&3272&&3638&&3502 线段树

    题目大意 给定一个长为n的序列,维护两种操作: 1.单点修改 2.在[l,r]这段区间中取k个互不相交的子段,使子段之和最大. \(n \leq 50000,k \leq 20\) 题解 四倍经验.( ...

  3. Godot-3D教程-02.3D性能和局限性

    介绍 Introduction Godot遵循表现与性能平衡信条.在这个表现的世界中,它们总是有许多约定俗成的东西,主要是在用执行速度换取可用性与扩展性方面.下面是一些实际的例子: 高效地渲染对象是比 ...

  4. 【250】◀▶IEW-Unit15

    Unit 15 Youth Issues 1.model1题目分析 Young people who are still at school often feel just as much stres ...

  5. python 进行web测试

    1:安装nosetests Python 单元测试框架之Nose http://blog.sina.com.cn/s/blog_65a8ab5d0101fihb.html Python nose te ...

  6. Apache2.2安装图解

    Apache2.2安装图解 2010-12-14 15:32:44|  分类: 不学无术之杂 |  标签:安装  端口  httpd  apache2.2  服务器   |字号 订阅 Apache音译 ...

  7. html中NAME和ID区别

    html中NAME和ID区别 NAME 的最大作用就是可以与服务端进行交互.Struts2中要设NAME的属性才能在Action中取到值,ID取不到. id与name的作用,作为标签的标识符,基本上是 ...

  8. 《Java多线程编程核心技术》读后感（十五）

    线程的状态 线程对象在不同的运行时期有不同的状态,状态信息就存在与State枚举类中. 验证New,Runnable,Terminated new:线程实例化后还从未执行start()方法时的状态 r ...

  9. pyjsonrpc模块使用

    pyjsonrpc模块的远程过程调用方法. # -*- coding:utf-8 -*- #!/usr/bin/env python2.7 # @Author : tianbao # @Contact ...

  10. Python绘制正态分布曲线

      使用Python绘制正态分布曲线,借助matplotlib绘图工具: \[ f(x) = \dfrac{1}{\sqrt{2\pi}\sigma}\exp(-\dfrac{(x-\mu)^2}{2 ...