原文：http://www.cnblogs.com/huangxiaojie/p/6121276.html
盒模型的组成大家肯定都懂，由里向外content,padding,border,margin.盒模型是有两种标准的，一个是标准模型，一个是IE模型。 从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高，而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。css如何设置两种模型这里用到了CSS3 的属性 box-sizing(默认值：content-box)1/* 标准模型 */ 2 box-sizing:content-box;
34/*IE模型*/5 box-sizi...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><style type="text/css">.tag{width: 300px;height: 100px;border: 5px solid #09F;position: relative;}.tag em{display: block;border-width: 20px;position: absolute;bottom: -40px;left: 100px;border-style: solid dashed d...
在做前端页面时，如果一个页面有多套动画特效依次播放。我们一般采用setTimeout延时，就可以完美解决动画依次执行的效果，但存在以下问题：
1、如果动画很多的话会让人感觉很累，因为每个动画动摇计算前方动画所运行的时间。
2、如果中间某个动画的运行时间进行修改的话，后面所有的动画都需要修改。所以，在使用JS控制动画时一般需要在动画结束后执行回调去进行DOM的相关操作，所以需要监听动画结束进行回调。JS提供了以下事件用于...
我们都知道，IE浏览器暂不支持CSS3的一些属性。国外的工程师们，不安于此现状，他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性，我觉得这些都是很有意义，很有价值的工作，可以推动整个技术领域的进步的。到目前为止，有不少可以让IE支持部分CSS3属性的工具。例如： 1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js) 这个玩意估计是试图让IE支持CSS3属性的鼻祖，还算蛮强大，就是性能开销较大，要解析很多文件脚本，给DOM添加...
FSVS（Full Screen Vertical Scroller）是一款jQuery和CSS3带过渡效果的全屏垂直翻页特效插件。该全屏翻页插件在页面上下滚动时一次翻一屏，并带有CSS3过渡动画效果。该jquery翻页插件的效果和OnePageScroll.js类似，但使用上要简单得多。在线演示：http://www.htmleaf.com/Demo/201503021447.html下载地址：http://www.htmleaf.com/jQuery/Layout-Interface/201503021446.html原文：http://blog.csdn.net/souhugirl/article/detai...
animation是CSS3的动画属性，可以设置以下六种属性。 transition是CSS3的过度属性，可以设置以下四种属性。 从属性上分析，animation可以设定循环次数。其次，两者的触发条件不同，transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。所以：1. 如果要灵活定制多个帧以及循环，用animation.2. 如果要简单的from to 效果，用transition.3. 如果要使用js灵活设定动画属性，用transition. 原...
CSS3 文本效果CSS3中包含几个新的文本特征。在本章中您将了解以下文本属性：text-shadowword-wrap浏览器支持Internet Explorer 10, Firefox,Chrome, Safari, 和 Opera支持text-shadow 属性。所有的主流浏览器支持自动换行（word-wrap）属性。注意： Internet Explorer 9及更早IE版本不支持 text-shadow 属性.CSS3的文本阴影CSS3中，text-shadow属性适用于文本阴影。您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：h1
{
...
我们在设计网页样式的时候，经常会用到边框，那么css中的边框具体有哪些样式呢，下面我们来看。首先，在css中设置border的时候，我们一般给给出三个值，线条样式，线条粗细，线条颜色。以上的三个值，线条样式是必须要设置的，否则边框则无法显示到页面上，border的线条样式有四种，分别是：实线（solid）点线（dotted）双实线（double）虚线（dashed）粗细和颜色可以默认，粗细默认是3px，颜色是根据当前元素的文本颜色决定的。所...
属性选择器 [title]:选择带有title属性的元素 [title=‘hello‘]:选择属性是title并且值是hello的元素 [title~=‘hello‘]:选择属性是title并且部分值是hello的元素，hello需要是单独的值，以空格分开 [title*=‘hello‘]:选择属性是title并且其中包含了hello的元素 [title|=‘hello‘]:选择属性是title并且值是以hello开头并且允许hello后面以-的任意字符 [title^=‘hello‘]:属性以hello开头的任意字符 [ti...
CSS3 3D变换功能允许在3D空间中变换元素。一、元素的3D转换使用CSS3 3D变换功能，可以对三维空间中的元素执行基本的变换操作。如移动，旋转，缩放和倾斜。变换后的元素不会影响周围的元素，但可以像绝对定位的元素一样将它们重叠。但是，变换后的元素在其默认位置（未变换）仍会在布局中占用空间。二、使用CSS变换和Transform()函数变换功能CSS3 transform属性使用变换功能来操纵元素使用的坐标系，以便应用变换效果。案例描述了3D...
http://jsfiddle.net/8Tb6x/先是HTML 一个父div包含四个绝对定位的div<div class=‘container container--realistic‘><div class=‘cube cube--ani‘><div class=‘face‘>1</div><div class=‘face‘>2</div><div class=‘face‘>3</div><div class=‘face‘>4</div></div>
</div>
首先，一个静态的立方体
.face:nth-child(1) {-webkit-transform: /*rotateY(0deg)*/ translateZ(2.5em /* half the side length, 5em in this cas...
鼠标hover 以后。图片上面出现一个遮罩, 透明度变化， 显示设置好的文字的文字，完全使用css 实现，下图是效果 关键代码 复制代码代码如下:.featured-image:hover { opacity: 0.9; color: #fff; background: rgba(0,0,0,0.8); } 看源码吧 复制代码代码如下:<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #content article { float: left; margin-right: 4%; max-width: 236px; positi...
在线演示本地下载原文：https://www.cnblogs.com/qixidi/p/10079584.html
如今，这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持，包括Safari，谷歌浏览器，IE，Opera和火狐浏览器。下面让我们来看看border-radius的语法，解释，以及IE是如何支持它的。语法和说明在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似：复制代码代码如下:.roundElement { border-radius: 10px;}上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为10px。你也可...
