css3功能
提供了更加强大而且精准的选择器，提供多种背景填充方案，可以实现渐变，弹性盒子，ie6混杂模式的盒模型，新的计量单位，动画效果等等
<div class="content"> <div class="block border">
一、CSS3边框
1、border-radius<span> (ie9+, 前缀-webkit-, -ms- 或 -moz- )</span>
2、border-image<span> (ie11+, 前缀-webkit-, -ms- 或 -moz- )</span>
3、box-shadow<span> (ie9+, 前缀-webkit-, -ms- 或 -moz- )</span>
</div>
<div class="block border-radius">
1、borderRadius<span> (ie9+, 前缀-webkit-, -ms- 或 -moz- )</span>
-
<div class="case bg-default one"></div> <div class="case-text text-center">一个值</div>
-
<div class="case bg-danger two"></div> <div class="case-text text-center">两个值</div>
-
<div class="case bg-warning three"></div> <div class="case-text text-center">三个值</div>
-
<div class="case bg-primary four"></div> <div class="case-text text-center">四个值</div> <div class="info"> 如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则： 一个值： 四个圆角值相同 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 以下为四个实例: 1. 一个值 - border-radius: 15px 2. 两个值 - border-radius: 15px 0 3. 三个值 - border-radius: 10px 30px 0 4. 四个值 - border-radius: 25px 40px 0 10px </div> </div> <div class="block border-image">
2、border-image<span> (ie11+, 前缀-webkit-, -ms- 或 -moz- )</span>
-
<div class="case bg-default"></div> <div class="case-text"></div>
-
<div class="case bg-danger"></div> <div class="case-text"></div> </div> <div class="block box-shadow">
3、box-shadow<span> (ie9+, 前缀-webkit-, -ms- 或 -moz- )</span>
也可以在 ::before 和 ::after 两个伪元素中添加阴影效果
-
<div class="case bg-default"></div> <div class="case-text"></div>
-
<div class="case bg-danger"></div> <div class="case-text"></div>
-
<div class="case bg-danger"></div> <div class="case-text"></div>
-
<div class="case bg-danger"></div> <div class="case-text"></div> <div class="info"> #boxshadow::after { content: ''; position: absolute; z-index: -1; /* hide shadow behind image */ box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%; left: 15%; /* one half of the remaining 30% */ height: 100px; bottom: 0; } </div> </div> <div class="block background">
二、CSS3背景
1、background-image<span> (ie9+)</span>
2、background-size<span> (ie9+, 前缀-webkit-, -ms- 或 -moz- )</span>
3、background-origin<span> (ie9+, 前缀-webkit-, -ms- 或 -moz- )</span>
4、background-clip<span> (ie9+, 前缀-webkit-, -ms- 或 -moz- )</span>
</div>
<div class="block background-image">
1、background-image<span> (ie9+)</span>
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
-
<div class="case bg-default one"></div> <div class="case-text text-center">css3两张图叠加(css未合并)</div>
-
<div class="case bg-danger two"></div> <div class="case-text">css3两张图叠加(css已合并)</div>
-
<div class="case three"></div> <div class="case-text">css2背景图</div> </div> <div class="block background-size">
2、background-size<span> (ie9+, 前缀-webkit-, -ms- 或 -moz- )</span>
background-size属性指定背景图片大小。
-
<div class="case one"></div> <div class="case-text text-center">background-size:160px 100px</div>
-
<div class="case two"></div> <div class="case-text">background-size:80% 80%</div>
-
<div class="case three"></div> <div class="case-text">background-size:cover</div>
-
<div class="case four"></div> <div class="case-text">background-size:contain</div> <div class="info">
语法：background-size: length|percentage|cover|contain;
length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
</div>
</div>
<div class="block text">
四、text文本效果
1、text-shadow<span>(ie10+, 文本阴影)</span>
2、text-overflow<span>(ie6+, CSS3文本溢出属性指定应向用户如何显示溢出内容)</span>
3、word-wrap<span>(ie5.5+, 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字)</span>
4、word-break<span>(ie5.5+, 单词拆分换行)</span>
-
<div class="case one text-center">文本阴影</div> <div class="case-text text-center">text-shadow</div>
-
<div class="case two text-center">CSS3文本溢出属性指定应向用户如何显示溢出内容</div> <div class="case-text text-center">text-overflow单行溢出</div>
-
<div class="case three text-center">CSS3文本溢出属性指定应向用户如何显示溢出内容CSS3文本溢出属性指定应向用户如何显示溢出内容</div> <div class="case-text text-center">text-overflow多行溢出</div>
-
<div class="case four">CSS3中，自动换行属性允</div> <div class="case-text text-center">CSS3 自动换行</div>
-
<div class="case five">This paragrap</div> <div class="case-text text-center">CSS3 单词拆分换行</div>
-
<div class="case six modal bg-black">阴影</div> <div class="case-text text-center">text-shadow 叠加效果</div>
-
<div class="case seven modal">阴影</div> <div class="case-text text-center">text-shadow</div>
-
<div class="case eight modal">阴影</div> <div class="case-text text-center">text-shadow</div>
-
<div class="case nine modal">阴影</div> <div class="case-text text-center">text-shadow</div>
-
<div class="case ten modal">阴影</div> <div class="case-text text-center">text-shadow</div> <div class="info">
文本阴影语法：text-shadow: h-shadow v-shadow blur color;
文本阴影叠加的语法：text-shadow: h-shadow v-shadow blur color,h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色
单词拆分换行规则1：word-break: keep-all;
单词拆分换行规则2：word-break: break-all;
</div>
</div>
<div class="block font-face">
五、font-face<span class="text-danger">(ie9+)</span>
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
URL请使用小写字母的字体，大写字母在IE中会产生意外的结果
<div class="info">
语法：
@font-face{font-family: myFirstFont;src: url(sansation_light.woff);}
div{font-family:myFirstFont;}
</div>
</div>
<div class="block transform">
六、transform<span class="text-danger">(ie10+)</span>
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
<div class="info">
语法：
transform: none|transform-functions;
2D转换
matrix(n,n,n,n,n,n) 定义 2D 转换，六个参数，包含旋转，缩放，移动（平移）和倾斜功能。。
<div class="transform-box matrix"></div>
translate(x,y) 定义 2D 转换，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
<div class="transform-box translate"></div>
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
<div class="transform-box translateX"></div>
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
<div class="transform-box translateY"></div>
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
<div class="transform-box scale"></div>
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
<div class="transform-box scaleX"></div>
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
<div class="transform-box scaleY"></div>
rotate(angle) 定义 2D 旋转，在参数中规定角度。
<div class="transform-box rotate"></div>
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
<div class="transform-box skew"></div>
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
<div class="transform-box skewX"></div>
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
<div class="transform-box skewY"></div>
3D转换
</div>
</div>
<div class="block transition">
七、transition<span class="text-danger">(ie10+)</span>
-webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号
<div class="info">
语法：
transition: property duration timing-function delay;
要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。
属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
如果是多项：transition: width 2s, height 2s, transform 2s;
如果是单项简写：transition: all 2s;
/*transition-property: left;
transition-duration:1s;
transition-timing-function: ease;
transition-delay: 2s;*/
/*简写形式*/
transition: left 1s ease 1s;
<div class="transition">
-
<div class="case bg-default one"></div>
-
<div class="case bg-warning two"></div>
-
<div class="case bg-warning three"></div>
-
<div class="case bg-warning four"></div> </div> </div> 1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). 3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). 4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0). 5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。 </div> <div class="block animation">
八、animation<span class="text-danger">(ie10+)</span>
<div class="info">
语法：
animation: name duration timing-function delay iteration-count direction;
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。(animation-iteration-count: n|infinite;)
animation-direction 规定是否应该轮流反向播放动画(animation-direction: normal|reverse|alternate|alternate-reverse;)。
例子应用
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
<div class="animation-box linear"></div>
<div class="animation-box ease"></div>
<div class="animation-box ease-in"></div>
<div class="animation-box ease-out"></div>
<div class="animation-box ease-in-out"></div>
</div>
</div>
<div class="block column">
十、column多列<span class="text-danger">(ie9+)</span>
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
URL请使用小写字母的字体，大写字母在IE中会产生意外的结果
<div class="info">
语法：
@font-face{font-family: myFirstFont;src: url(sansation_light.woff);}
div{font-family:myFirstFont;}
</div>
</div>
<div class="block media">
十六、media<span class="text-danger">(ie9+)</span>
响应式设计
媒体查询可用于检测很多事情，例如：viewport(视窗) 的宽度与高度、设备的宽度与高度、朝向 (智能手机横屏，竖屏) 、分辨率
<div class="info">
语法：
@media not|only mediatype and (expressions){
CSS-code;
}
link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css"
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等。
speech 用于屏幕阅读器
准备工作1：设置Meta标签
首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
准备工作2：加载兼容文件JS,详情看注释
因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
准备工作3：设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:
为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：
meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"
怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。
</div>
</div>
<div class="block responsePicture">
十七、响应式图片
如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值：img {max-width: 100%; height: auto;}
CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度)
Internet Explorer或 Safari 5.1 (及更早版本) 不支持该属性。
img {-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */filter: grayscale(100%);}
图片 Modal(模态)
<div class="info">
语法：
@media not|only mediatype and (expressions){
CSS-code;
}
link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css"
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等。
speech 用于屏幕阅读器
准备工作1：设置Meta标签
首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
准备工作2：加载兼容文件JS,详情看注释
因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
准备工作3：设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:
为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：
meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"
怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。
</div>
</div>
<div class="block">
-
</div></div>
409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
