charming的专栏

css实现图片.pp{height:0px;width:0px;border-top:#00f solid 50px;border-right:#f0f solid 50px;border-left:#0ff solid 50px;border-bottom:#f00 solid 50px;}

弹性盒模型在使用弹性盒模型的时候 父元素必须要加display:box 或者display:inline-box。box-orient定义盒模型的布局方向horizontal 水平显示vertical 垂直方向box-direction 元素排列顺序normal 正序reverse 反序box-ordinal-group 设置元素的具体位置box-flex 定义盒子的弹性空间子元素的尺寸

一、属性选择器 Ele[attr]只使用属性名，但没有确定任何属性值。 Ele[attr=”value”]指定属性名，并指定了该属性的属性值。 Ele[attr~=”value”]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词。 Ele[attr^=”value”]指定了属性名，并且有属性值，属性值是以value开头的。 Ele[att

CSS清除浮动方法集合一、浮动产生原因   -   TOP一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。浮动产生样式效果截图本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。

transition过渡transition参数transition-property 要运动的样子（all || [attr] || none） transition-duration 运动时间 transition-delay 延迟时间 transition-timing-function 运动形式 ease 逐渐变慢 默认值 linear 匀速 ease-in 加速 ease

新增颜色模式 rgba（r,g,b,a） r red 0~255 g green 0~255 b blue 0~255 a alpha 0~1实例：背景透明，文字不透明文字阴影 text-shadow: x y blur color 文本阴影如果加多层，层之间用逗号分隔，会很卡。通过文字阴影可以做出很多文字特效，如浮雕、光晕。 文字模糊效果：

层级关系为：效果图：为改变参照物（橘色框）后的效果层级关系为：效果图：参照物为最顶级的元素情况。层级关系为：效果图： 仅使用margin属性布局绝对定位元素的情况此情况，margin-bottom 和margin-right的值不再对文档流中的元素

圆角border-radius: 1-4个数/1-4个数前面表示水平半径，后面表示垂直半径（椭圆） 不给“/”则水平半径和垂直半径一样（圆）参数各种长度单位都可以：px, %,… %有时很方便，%表示半径占元素宽或高的百分比 实例：<style type="text/css"> .box {width: 400px; height: 400px; margin: 50px au

语法transform ：none | [ ]*取值指定一个身份转变说明应用于block水平和inline水平的元素。transform可以对元素进行角度旋转和缩放,请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现在设置了transform属性后，可以设置transform-origin属性，这个属性控制变形时的源点，也就是变形时围绕

什么是CSS Sprite ？不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON，栏目背景啊，图片按钮啊等都有会有规则的合并一张背景图,然后用background-position来实现背景图片的定位，他们为什么要花费一些时间来合并这些CSS背景图片呢,CSS中用一张背景图做页面的技术到底有什么优势呢?通常我

首先看效果图： 大体效果就是这样，截图的效果不好，有帧的丢失。注意的几点： 1.小图标震动基点（变换基点）的设置，三朵云的尺寸大小控制，都是CSS3中的新属性。 2.进场页面淡出然后显示首页，淡出的时机是动画执行结束了并且首页预加载图片完成。 3.为了兼容性，执行动画的一些属性应该写两个版本，一个带-webkit-,一个不带，例如： -webkit-animation、animation