css3基础
CSS3的语法是建立在CSS原先版本基础上的，它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。
基于css2内容部分，不做过多介绍
css3进阶
选择器
-
属性选择器
[属性名=值]{}
[属性名]{}
[属性名^=值]{} 以值开头
[属性名*=值]{} 包含
[属性名$=值]{} 包含 -
结构伪类选择器
:first-child{}
:last-child{}
:nth-child(n){}
:nth-last-child(n){}n>=0 支持an+b
odd
even -
伪元素选择器
::before
::after -
目标伪类选择器
:target 匹配相关URL指向的E元素 -
UI元素状态伪类
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E::selection匹配E元素中被用户选中或处于高亮状态的部分 -
其他选择器
::section
::first-line 选中第一行
::first-letter 选中第一个单词
背景
background-origin 规定背景图片定位区域
取值 padding-box 默认值
border-box
content-box
background-clip
background-size
-
多背景图
CSS3允许使用多个属性（比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一个元素上添加多层背景图片
代码示例如下：/*多图背景*/ #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } /*或*/ #example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; } -
边框
圆角边框 border-radius
边框阴影 box-shadow
常用代码：
圆形div.circle{ width: 300px; height: 300px; background-color: pink; border-radius: 50%;/*圆角边框为50%是圆形*/ box-shadow: 10px 10px 5px #888888 inset; /*水平阴影位置 垂直阴影位置 阴影的尺寸 颜色 将外部阴影改为内部阴影*/ }三角形
div.singer{ width: 0; height: 0; border-left: 20px solid transparent; border-top:20px solid #aaaaaa; border-right: 20px solid transparent; } -
文本
text-shadow文字阴影
代码示例如下：p{ text-align: center; text-shadow: 10px 10px 10px #aaaaaa; /* 水平阴影位置 垂直阴影位置 模糊距离 阴影颜色 */ font-size: 60px; }注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性
-
渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 ，默认从上到下
语法
background: linear-gradient(direction, color-stop1, color-stop2, …);
实例
从上到下的线性渐变：#grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 */ }从左到右的线性渐变：
#grad { background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 标准的语法 */ }从左上角到右下角的线性渐变：
#grad { background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */ }带有指定的角度的线性渐变：
#grad { background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(180deg, red, blue); /* 标准的语法 */ }带有多个颜色结点的从上到下的线性渐变：
#grad { background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, green, blue); /* 标准的语法 */ }从左到右的线性渐变，带有透明度：
#grad { background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */ background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/ background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/ background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */ }一个重复的线性渐变：
#grad { /* Safari 5.1 - 6.0 */ background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法 */ background: repeating-linear-gradient(red, yellow 10%, green 20%); }径向渐变（Radial Gradients）- 由它们的中心定义
语法
background: radial-gradient(center, shape size, start-color, …, last-color);
实例
颜色结点均匀分布的径向渐变：#grad { background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ background: radial-gradient(red, green, blue); /* 标准的语法 */ }颜色结点不均匀分布的径向渐变：
#grad { background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */ background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */ }形状为圆形的径向渐变：
#grad { background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */ background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */ }一个重复的径向渐变：
#grad { /* Safari 5.1 - 6.0 */ background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); } -
2D 3D
https://cubic-bezier.com/
3d x y z
左手坐标系
2D转换
translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。div{ transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ } translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素rotate() 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
div{ transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ } rotate值（30deg）元素顺时针旋转30度scale() 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
-ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /* 标准语法 */ scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。skew()包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
-
skewX();表示只在X轴(水平方向)倾斜。
-
skewY();表示只在Y轴(垂直方向)倾斜。
div{ transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ } skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。
matrix() 2D方法转换合幷，有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
利用matrix()方法旋转div元素30°div{ transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ }3D转换
rotateX() 围绕其在一个给定度数X轴旋转的元素。div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */ }rotateY() 围绕其在一个给定度数Y轴旋转的元素。
div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */ }translate3d(x,y,z) 定义 3D 转化。
scale3d(x,y,z) 定义 3D 缩放转换。
rotate3d(x,y,z,angle) 定义 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图 … -
-
动画
animation
兼容性:
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。语法
animation: name duration timing-function delay iteration-count direction;
实例div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */ } -
伸缩布局
display: flex
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。flex:
当父元素使用display: flex后，子元素会具有弹性布局，子元素设置flex属性后面接数字，例如：flex:1，表示该子元素在该父元素的所有子元素中大小占一份，就会自适应宽度box-sizing：border-box
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。flex-wrap：wrap
让弹性盒元素在必要的时候拆行。使其不再收缩。
新增特性
CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等
-
边框特性
CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义 。/*圆角边框*/ div{ border:2px solid; border-radius:25px; } /*图片边框*/ div{ border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* Opera */ } -
多背景图
/*多图背景*/ #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; } /*或*/ #example1 { background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; } -
颜色与透明度
CSS3增加了HSL、HSLA、RGBA几种新的颜色模式，还可以根据需求设置颜色透明度 -
多列布局与弹性盒模型布局
/*多列布局*/ .newspaper{ column-count:3; column-gap:40px; column-rule-style:outset; column-rule-color:#ff0000; column-rule-width: 1px; } h2{ column-span:all; } /*弹性盒子*/ <style> .flex-container { display: flex; justify-content: center; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } </style> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div> -
盒子的变形
使用2D 3D进行位移，旋转，缩放，扭曲/*2D转换*/ /*移动*/ div{ transform: translate(50px,100px); } /*旋转*/ div{ transform: rotate(30deg); } /*改变宽高*/ div{ transform: scale(2,3); } /*倾斜*/ div{ transform: skew(30deg,20deg); } /*使用六个值的矩阵实现转换*/ div{ transform: matrix(0.866,0.5,-0.5,0.866,0,0); } /*3D转换*/ /*围绕X轴旋转*/ div { transform:rotateX(120deg); } /*围绕Y轴旋转*/ div { transform:rotateY(130deg); } /*围绕Z轴旋转*/ div { transform:rotateZ(140deg); } /*围绕Z轴旋转*/ div { transform:rotateZ(140deg); } /*改变被转换元素的位置*/ #div2 { transform: rotate(45deg); transform-origin:20% 40%; } /*让转换的子元素保留3D转换*/ <style> #div1 { padding:50px; position: absolute; border: 1px solid black; background-color: red; transform: rotateY(60deg); transform-style: preserve-3d; } #div2{ padding:40px; position: absolute; border: 1px solid black; background-color: yellow; transform: rotateY(-60deg); } </style> <div id="div1">HELLO <div id="div2">YELLOW</div> </div> /*透视效果及规定其底部位置*/ div{ perspective:150; perspective-origin: 10% 10%; } /*定义元素在不面对屏幕时是否可见*/ div{ backface-visibility:hidden;/*可见为visible*/ } -
过渡与动画
CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果/*过渡*/ div{ transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; } /*或*/ div { transition: width 1s linear 2s; } /*动画*/ div{ width:100px; height:100px; background:red; animation:myfirst 5s; } @keyframes myfirst{ 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } -
Web字体
CSS3中引入了@font-face，@font-face是链接服务器字体的一种方式，这些嵌入的字体能变成浏览器的安全字体，开发人员不用再担心用户没有这些字体而导致网页在用户浏览器无法正常显示的问题/*引入字体*/ @font-face{ font-family: myFirstFont; src: url(sansation_light.woff); } div{ font-family:myFirstFont; } -
媒体查询
CSS3中引入媒体查询（mediaqueries），可为不同分辨率的设备定义不同的样式/*媒体查询判定屏幕可视窗口尺寸*/ body { background-color: pink; } @media screen and (min-width: 480px) { body { background-color: lightgreen; } } -
阴影
阴影主要分为两种：文本阴影（text-shadow）和盒子阴影（box-shadow）。文本阴影在CSS2中已经存在，但没有得到广泛的运用（CSS2.1中删除了）。/*文本阴影*/ h1{ text-shadow: 5px 5px 5px #FF0000; } /*盒子阴影*/ div{ box-shadow: 10px 10px 5px #888888; }
兼容问题
Chrome（谷歌浏览器）：-webkit-
Safari（苹果浏览器）：-webkit-
Firefox（火狐浏览器）：-moz-
lE（IE浏览器）：-ms-
Opera（欧朋浏览器）：-0-
例如，CSS3渐变样式在Firefox和Safari中是不同的。Firefox使用-moz-linear-gradient，而Safari使用-webkit-gradient，这两种语法都使用了厂商类型的前缀。
需要注意的是，在使用有厂商前缀的样式时，也应该使用无前缀的。这样可以保证当浏览器移除了前缀，使用标准CSS3规范时，样式仍然有效。例如：
#example{
-webkit-box-shadow：0 3px 5px#FFF;
-moz-box-shadow：0 3px 5px#FFF;
-o-box-shadow：0 3px 5px#FFF;
box-shadow：0 3px 5px#FFF;/*无前缀的样式*/
}
优势
1、减少开发成本与维护成本(不需要新增其他的html标签来实现某个效果，比如圆角：border-radius)
2、提高页面性能(例如CSS3的动画效果，能够减少对JavaScript和Flash文件的HTTP请求)
958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
