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 过渡就是在一...
动画(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...
1.border-radius:50%; 2.text-shadow: h-shadow v-shadow blur color; h-shadow:水平位置投影； v-shadow:垂直位置投影； blur:模糊的距离; color:阴影颜色； text-shadow:2px 2px 8px #ff0000; 3.column-count: number|auto; .newspaper{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3; -moz-column-gap:30px; /* Firefox */-webkit-...
一个简单的SVG绘制图片的小案例。 效果图: 代码如下: 1 2 * { 3 padding: 0; 4 margin: 0; 5 } 6 7 body { 8 background-color: #d5d3d4; 9 }10 11 .container {12 width: 500px;13 height: 500px;14 position: relative;15 top: 80px;16 left: 50%;17 ...
来自： http://www.cnblogs.com/tom-zhu/p/5226096.html Html5和CSS3相信大家现在都已不陌生了吧，但 CSS3哪些新特性值得我们去称赞呢？ 首先还是让大家来看几张效果图，相信大家看到这些效果图，肯定会说这些效果只用CSS是如何实现的呢？ 1、3D正方形及动画（如果大家用过webpack的话，一定看过webpack的动画logo吧。听老婆大人说现在流行动画的logo，再也不是那些静止不动的喽 ：》。） 2、3D正方形边...
Atitit. Toast alert loading js控件 atiToast v2新特性 1. 连续多个txt追加的原理 var txt = document.createElement("p"); txt.setAttribute("id","msgTxt"); txt.style.margin="16px 0"; txt.style.color="#333"; txt.innerHTML = str; document.getElementById("alertmsgDiv").appendChild(txt); 2. V1 新特性 可以连续多个txt追加 作者:: ★(...
css3被拆分成如下的小模块，选择器，盒模型，背景和边框，文字特效，2D/3D转换，动画，多列布局和用户界面 2D转换 使用transform:属性来为元素设置2D转换，兼容浏览器加前缀 –webkit- -moz- 使用rotate()方法，让元素旋转一定的角度，参数：角度 例如：transform:rotate(30deg); deg是角度的单位 使用translate()方法，让元素位移，参数：x轴 ，y轴 例如：transform:translate(10px,10px); 使...
现在html 5技术是最新的html标准，掌握html 5已经变得非常重要，以下是我查看相关资料后对html 5 的新特性的总结，方便大家对比学习。html 5的新特性1.取消了一些过时的html 4标签 例如，取消了和这些纯粹显示效果的标签。 2.将内容和展示分离 例如去掉了,,,这些标签，而在css中展示显示效果。 3.增加了全新的表单输入对象 例如日期，url,Email地址等表单输入对象，还增加了对非拉丁字符的支持，还引入了微数据。 4.增加更...
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...
Atitit. Toast alert loading js控件 atiToast v2新特性1. 连续多个txt追加的原理var txt = document.createElement("p"); txt.setAttribute("id","msgTxt"); txt.style.margin="16px 0"; txt.style.color="#333";txt.innerHTML = str; document.getElementById("alertmsgDiv").appendChild(txt); 2. V1 新特性 可以连续多个txt追加作者:: ★(attilax)>>> 绰号:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克...
一、DNS 预解析缓存 众所周知，解析 DNS 是网站性能优化的比较重要的一部分，虽然加载时间不太长，但是很难压缩起来。特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站，更不可忽视，每加载资源之前都要先进行 CDN 域名的 DNS 解析转换。如果采用 DNS 预加载，支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下，而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单： 代码如下:淘宝网就应用...
html5新特性有哪些1.语义化标签对比之前HTML没有体现结构语义化的标签，如：<div id="header"></div> //表头的声明HTML5提供语义化标签，如：<header><article><footer><nav><aside><section>等2.增强型表单多个新的表单 Input 输入类型，如：color,url,date等这些新特性提供了更好的输入控制和验证。新增表单元素，如：<output>，用于用于不同类型的输出，比如计算或脚本输出。新增表单属性，如：placehoder 属性，简短的提示在用...
),他比支持SQL查询的数据库简单多，但是，他要比Web存储API支持的键/对存储更加强大、更高效、更健壮。 (2).IndexedDB与Web存储和文件系统API一样，IndexedDB数据库同样受同源政策的限制(即跨域问题)，也就是说两个同源的Web页面相互之间可以访问对方的数据，但是非同源的页面是无法进行访问。 (3).IndexedDB的每个源都可以有任意数目的IndexedDB数据库。但是每个数据库的名字在该源下必须是唯一的，在IndexDB API中，一个...