Atitti css3 新特性attilax总结 图片发光效果2透明渐变效果2文字描边2背景拉伸2 CSS3 选择器（Selector）4@Font-face 特性7Word-wrap & Text-overflow 样式9Word-wrap9Text-overflow10文字渲染（Text-decoration） 描边12CSS3 的多列布局（multi-column layout）13边框和颜色（color, border）14CSS3 的渐变效果（Gradient）15线性渐变15径向渐变16CSS3 的阴影（Shadow）和反射（Reflect）效果19CSS3 的背景效果21CSS3 的盒子模...
1、盒子模型（1）border属性和padding属性会影响盒子的实际大小：<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script></script><style>div{width: 200px;height: 200px;background-color: black;border: 30px solid red;}</style></head><body><div></div></body>
</html> <!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script></script><style>div{width: 200px;height: 200px;ba...
CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行;~:p ~ p {color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/
}[attribute^=value]:选择该属性以特定值开头的元素[attribute$=value]:选择该属性以特定值结尾的元素[attribute*=value]:选择该属性中出现了特定值的元素上边三个是可以组合使用的,方法如 ↓ :实际中可以应用在区分本地链接与外部链接,通过判...
CSS3的媒体查询是对CSS2媒体类型的扩展,完善;CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width,height,color等具有取值范围的属性;media query 与 media type 的区别在于: media query是一个值或一个范围的值,而media type仅仅是设备的匹配(所以media type 是一个单词,而media query 后边需要跟着一个数值,两者可以混合使用);media可用于link标签属性 [media]<link rel="stylesheet" type="text/css" ...
一、缓动效果学习和利用贝塞尔曲线，默认支持ease，ease-in，ease-out,ease-in-out和linear等还提供一个cubic-beizer自定义贝塞尔曲线的起点和终点Css中只支持一条贝塞尔曲的运动，不能连续多段对cubic-beizer中控制锚点的水平坐标与垂直坐标互换，就可以得到任何调整函数的反向版本 cubic-beizer(.1,.25,1,.25)是ease的反向调整函数水平坐标只能在0~1的范围内，因为水平坐标表示的是时间垂直坐标可以超过此范围，表示为运动距离示...
未来使用H5的场景会越来越多，这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清，那就是IE系列浏览器还占有一大部分市场份额，以IE8、9为主，windows8.1的用户已经用上了IE10/11，而考虑我国的国情，IE6、7依然存留不少。在我们放手用HTML5开发的时候，新特性支持度检测就是必不可少的了。一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本，不过这种方式不是很可靠，浏览器对于一些新特性也...
HTML5, CSS3以及相关技术（例如canvas和web sockets）带来了非常有用的特性，可以让我们的web程序提升一个新的level。这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面。HTML5虽然提供了很多新特性，但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太现实，老版本浏览器已经使用了很多年，我们依然需要考虑这些版本的兼容性问题。本文要解决的问题就是：在我们使用HTM...
伴随着今年10月底HTML5标准版的发布，未来使用HTML5的场景会越来越多，这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清，那就是IE系列浏览器还占有一大部分市场份额，以IE8、9为主，windows8.1的用户已经用上了IE10/11，而考虑我国的国情，IE6、7依然存留不少。在我们放手用HTML5开发的时候，新特性支持度检测就是必不可少的了。一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本，不过这种...
伪类选择器E:first-of-type: 匹配同类型中的第一个同级兄弟元素EE:last-of-type: 匹配同类型中的最后一个同级兄弟元素EE:first-child: 匹配其父元素的第n个子元素，第一个编号为1E:last-child: 匹配其父元素的倒数第n个子元素，第一个编号为1E:nth-child(n): 选择属于其父元素的第n个子元素的E:nth-last-child(n): 选择属于其父元素的倒数第n个子元素的E:only-child: 选择属于其父元素的唯一子元素(只有一个才能被选中)E:only-of-t...
Atitti css3 新特性attilax总结图片发光效果2
透明渐变效果2
文字描边2
背景拉伸2CSS3 选择器（Selector）4
@Font-face 特性7
Word-wrap & Text-overflow 样式9
Word-wrap9
Text-overflow10
文字渲染（Text-decoration） 描边12
CSS3 的多列布局（multi-column layout）13
边框和颜色（color, border）14
CSS3 的渐变效果（Gradient）15
线性渐变15
径向渐变16
CSS3 的阴影（Shadow）和反射（Reflect）效果19
CSS3 的背景效果21
CS...
颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数值[经实验,可以为小数]; 饱和度与亮度:均为百分比; 下图截自http://www.w3.org/wiki/CSS/Properties/color/HSL 当亮度为100%时为白色,当亮度为0%为黑色; 饱和度100%以及亮度50%时生成的颜色均为web安全色 rgb(): rgb函数:r(red),g(green),b(blue)[计算机三原色]; 值...
CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/} [attribute^=value]: 选择该属性以特定值开头的元素 [attribute$=value]: 选择该属性以特定值结尾的元素 [attribute*=value]: 选择该属性中出现了特定值的元素 上边三个是可以组合使用的,方法如 ↓...
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 过渡就是在一...
CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，目前有很多浏览器已经相继支持这项升级的规范，如：Firefox、Chrome、Safari、Opera 等等。在 Web 开发中采用 CSS3 技术将会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能。本文将重点介绍一些比较绚丽且实用 CSS3 新特性。【推荐教程：CSS3教程】