摘要：一、什么是响应式设计 维基百科是这样对响应式作的描述：“Responsive设计简单的称为RWD，是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。” 响应式布局设计要考虑到元素布局的秩序，需要满足三个条件： 网站必须建立在灵活的流体网格基础上 流体网 阅读全文

摘要：一、初步了解 Media Queries是CSS3新增加的一个模块功能，其最大的特点就是通过css3来查询媒体，然后调用对应的样式。 了解Media Queries之前需要了解媒体类型以及媒体特性： 可以通过媒体类型（Media Type）对不同的设备指定不同的样式，W3C总共列出了10种媒体类型 阅读全文

摘要：一、介绍 keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面跟着是动画名称加上一对花括号“{…}”，括号中是一些不同时间段样式规则。 语法：@keyframes animationname {keyframes-selector{cs 阅读全文

摘要：一、语法 transition: property duration timing-function delay transition属性是个复合属性，她包括以下几个子属性： transition-property ：规定设置过渡效果的css属性名称 transition-duration ：规定完 阅读全文

摘要：一、变形-旋转 ratate()函数 通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这 个值为负值，元素相对原点中心逆时针旋转。 transform:rotate(-20deg) 如下图： 阅读全文

摘要：语法 box-shadow:X轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 参数介绍： 注：inset 可以写在参数的第一个或最后一个，其它位置是无效的。 阴影模糊半径，其值只能为正值，值越大阴影边缘就越模糊，值为0时阴影不具有模糊效果。 阴影扩展半径，其值可 阅读全文

摘要：border-radius给元素加圆角边框 例： border-radius:20px; /*所有角都使用半径为20px的圆角*/ 实心圆： 把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。 实心上半圆： 把高度(height)设为宽度（w 阅读全文