CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width,height,color等具有取值范围的属性; media query 与 media type 的区别在于: media query是一个值或一个范围的值,而media type仅仅是设备的匹配(所以media type 是一个单词,而media query 后边需要跟着一个数值,两者可以混合使用); media可用于link标签属性 [media] 以及css文件内,下...
概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫的动画; 旋转(rotate): rotate支持一个参数,一个角度值 0-360deg #demo { transform:rotate(180deg) ;/*实现旋转,左上角的东西会在右下角显示*/} 缩放(scale): scale支持两个参数(x,y),如果没有填y的话,则取x的值;1为正常,<1为缩...
CSS 过渡（transition）, 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 transition 后，将按一个曲线速率变化。这个过程可以自定义。 Transition是一个简写属性,四个值(单独使用均加transition-前缀)的顺序: property duration timing-function delay 过渡就是在一...
本文摘自：http://blog.csdn.net/freshlover/article/details/7610269 text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值：...
动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法: @keyframes name { 0% { top: 0; }/*0%可用from关键字替代*/ 50% { top: 10px; } 100% { top: 0; }/*100%可用to关键字替代*/} 由于是CSS3,所以不出意外的各种前缀: --图片来自MDN,CSS中的关键帧 单个帧中可填写多个属性,而且不需要保证一致,如: @-webkit-keyframes identifier { from { to...
先从CSS3的选择器说起： E F：所有的子孙元素； E>F: E中的子元素； E+F：E元素之后的最近的选择器； E~F：E中所以后面兄弟元素（CSS3 不包括自己本身，前面也不包括） att*=val:只要包含指定的元素符（val1 val2 等等都算）； att^=val：首字符匹配； att$=val：尾字符匹配； att~=val：用空格分隔，且其中一个是val； att|=val：以val开头并用"-"连接符； CS...
一、特殊边框 通过 CSS3，能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框。边框属性： 1、border-radius：创建圆角边框 border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。 eg： 1 2 3 4 5 css3 6 7 p{ 8 border:2px solid; 9 border-radius:30px;10 text-align:center;11 }12 ...
CSS3重点总结(1)兄弟选择器：2种：+、 ~ 1.相邻兄弟选择器（+）：选择器1+选择器2 选择"选择器1"相邻的后一个兄弟"选择器2" 强调：选中的是自己相邻的下一个元素，不是自己 2.通用兄弟选择器（~）：选择器1~选择器2 选择"选择器1"之后的所有兄弟"选择器2" + 和~的区别： （1）+只选相邻一个，~选之后所有 （2）+要求必须相邻，如果相邻元素不满足+后选择器要求则不选 （3）~跳过之后所有不满足选择器条件的元素。 何时使用...
1. 构造样式表：selector{ Property:value; Property:value; } Selector是需要更改样式的元素，property为css属性的名称，value应用的哪种格式 2. /* 注释 */ 3. 当规则发生冲突时，服务器优先选择特殊性强的；靠后出现的；带有！important的 4. CSS属性的值可分为：继承值（在value处输入inherit），预定义值（left,right,none）,长度或者百分数，纯...
1.线性渐变：linear-gradient 语法：<linear-gradient> = linear-gradient([ [ | to <side-or-corner] ,]? <color-start>[, <color-end>]+) <side-or-corner> = [left | right] || [top | bottom] <color-start|end> = [ |]? 下述值用来表示渐变的方向，可以使用角度或者关键字来设置： ： 用角度值指定渐变的方向（或角度）。 to left： 设置渐变为从右到左。...
css3 就是css2 的一个升级版本。css2 是用来做效果渲染的，而css3 可以使做出来的效果更佳丰富。 C3有兼容性问题，移动端支持稍微要好些. 坚持以下原则： （1）渐进增强 （2）添加私有前缀 （3）考虑用户群体 【 选择器 】css3 在之前的基础上面扩展了三种类型的选择器 （获取到一个元素有...
属性选择器 E[attr]只使用属性名，但没有确定任何属性值E[attr="value"]指定属性名，并指定了该属性的属性值E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的E[attr*="value"]指定了属...
CSS3新特性，兼容性，兼容方法总结 css3手册 css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius：[ | ]{1,4} [ / [ | ]{1,4} ]? ： 用长度值设置对象的圆角半径长度。不允许负值 ： 用百分比设置对象的圆角半径长度。不允许负值 实例: border-radius:10px; border-radius:5px 10px 15px 20px; //顺序是顺时针 border-radius:26px 106px 162px 32px/28px 80...
本篇文章给大家带来的内容是关于CSS3中box-shadow属性实现的阴影效果总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果，该属性几乎可以让你完成你想要的任何阴影效果。然而 box-shadow 属性语法和取值非常灵活，对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。语法/* offset-x | offset-y | color */ box-shadow: 60px...
calc是什么意思？怎么使用？本篇文章给大家带来的内容是介绍css3中的calc()函数是什么，有什么用，如何使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。css3中的calc()是什么？可以做什么？calc()从字面看我们可以把它理解为一个function函数。其实calc就是英文单词calculate(计算)的缩写；它是一个css3新增的功能，可以用来指定元素的长度，动态计算长度值。（推荐学习：CSS3手册）在CSS3中calc()函数可以...