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. 洛谷P3252 [JLOI2012]树

    题目描述 在这个问题中,给定一个值S和一棵树.在树的每个节点有一个正整数,问有多少条路径的节点总和达到S.路径中节点的深度必须是升序的.假设节点1是根节点,根的深度是0,它的儿子节点的深度为1.路径不 ...

  2. bzoj 1510 [POI2006]Kra-The Disks——思路

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1510 #include<iostream> #include<cstdio ...

  3. The current .NET SDK does not support targeting .NET Core 2.2

    The current .NET SDK does not support targeting .NET Core 2.2 1. 奇怪的错误 最近遇到了一件奇怪的事, The current .NET ...

  4. UGUI笔记

    Text中的可以单独指定某些文字的颜色,只需将想要变色的文本放在<color=**></color>之间即可,如“吃<color=#ff7a38>橙色物品</ ...

  5. Promise API

    Promise API     刚刚接触promise这个东西,网上看了很多博客,大部分是讲怎么用Promise,丝毫没提怎么实现Promise. 我不甘 心,可是真去看JQuery或者Angular ...

  6. CF-845B

    B. Luba And The Ticket time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  7. Jdk 1.7*安装并配置

    jdk 1.7的下载,见http://www.cnblogs.com/lchzls/p/6281448.html 新建JAVA_HOME指明JDK安装路径,就是刚才安装时所选择的路径C:\Progra ...

  8. Linear Algebra - Determinant（几何意义）

    二阶行列式的几何意义 二阶行列式 \(D = \begin{vmatrix}a_1&a_2\\b_1&b_2\end{vmatrix} = a_1b_2 - a_2b_1\) 的几何意 ...

  9. 多列组合为主键(PRIMARY KEY)

    在表中,想把其中2列或多列作为组合主键. CREATE TABLE [dbo].[T3] ( ) NOT NULL, ) NOT NULL, ) NULL, ) NULL ) GO ALTER TAB ...

  10. FZU 2218【状压】

    题意: 给出长为n的字符串,含有前k种小写字母,求两个不含重复元素的连续子串,使得他们的长度乘积最大. 思路: 字符种类16 ->(套路) 状压 暴力2000*2000得所有连续子串的长度,得每 ...