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. Chrome检查更新总失败？安装细则讲解

    现在 Google Chrome 的稳定版都已经发布 68.0 版本了,我机上还是 54, 本想在线更新一下,结果点击菜单项中的“关于 Google Chrome”后,进入的界面提示“更新失败(错误: ...

  2. bzoj 5093 图的价值 —— 第二类斯特林数+NTT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=5093 每个点都是等价的,从点的贡献来看,得到式子: \( ans = n * \sum\li ...

  3. Poj_1005_I Think I Need A HouseBoat

    一.Description Fred Mapper is considering purchasing some land in Louisiana to build his house on. In ...

  4. VijosP1626:爱在心中

    描述 “每个人都拥有一个梦,即使彼此不相同,能够与你分享,无论失败成功都会感动.爱因为在心中,平凡而不平庸,世界就像迷宫,却又让我们此刻相逢Our Home.” 在爱的国度里有N个人,在他们的心中都有 ...

  5. Vijos:P1117数的划分

    描述 将整数n分成k份,且每份不能为空,任意两份不能相同(不考虑顺序). 例如:n=7,k=3,下面三种分法被认为是相同的. 1,1,5; 1,5,1; 5,1,1;问有多少种不同的分法. 格式 输入 ...

  6. Nuget-QRCode：jquery-qrcode

    ylbtech-Nuget-QRCode:jquery-qrcode 1.返回顶部 1. <!DOCTYPE html> <html> <head> <tit ...

  7. 解决Visual Code安装中文插件失败问题

    早已听闻Visual Code的大名,今日一用,果然不同凡响. 只不过,我的常用开发环境是不联网的,需要离线安装Visual Code和扩展插件. 以前要安装插件只能从VsCode里装,想离线安装比较 ...

  8. CodeForces 1131G. Most Dangerous Shark

    题目简述:从左到右依次有$n \leq 10^7$个Domino骨牌,高度为$h_i$,手动推倒他的花费为$c_i$.每个骨牌之间的距离为$1$.一个骨牌可以被向左或者向右推倒.当第$i$个骨牌被推倒 ...

  9. (二)搭建SSH环境

    一.struts 1.添加jar包: commons-fileupload-1.3.1.jar,[文件上传相关包] commons-io-2.2.jar, commons-lang-2.4.jar , ...

  10. openstack介绍（二）

    OpenStack services 本节将详细描述OpenStack服务. Compute service overview(计算服务概述) 使用OpenStack云计算计算主机和管理系统.Open ...