这篇文字收集了45个让人觉得不可思议的 CSS3 应用示例，它们验证了 CSS3 Transform 和 Transition 等属性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善，设计师和开发者们有了更多的选择，以前需要使用 JavaScript 才能实现的各种很酷的界面效果和动画，如今使用纯 CSS 代码就可以很容易实现。CSS3 Clock With jQueryAnother Image GallerySliding Vinyl3D Cube That Rotates Using Arrow KeysMultiple 3D Cubes (Slide...
在css中也存在着继承关系，与面向对象的编程语言不同，css的继承很简单，而且主要指的是在CSS盒模型中，外围的盒子的样式会被内部所包含的盒子所继承。具体来了解一下。HTML元素之间存在一个”树型“关系，这个关系使得样式发生继承。1. 子元素会继承父元素的样式2. 子元素可以定义自有样式3. 子元素可以改变从父元素继承而来的样式4. 子元素的样式不会反作用于父元素（继承是单向的）5. 每个元素都遵循样式继承的概念。6. 样式继承...
关键字：CSS特性1晨跑计划：学习计划：控制字体： font-family特性font-size特性font-weight特性font-style特性font-variant特性font-stretch特性font-size-adjust特性长度： 绝对单位相对单位百分比学习记录：控制字体： 可以采用多种特性来控制文档中文本的外观，可以将这些特性划分为如下两组： 直接影响字体和其外观特性对文字具有其他格式影响的特性字体和字型是不同的概念： 字型是字体族，例如Arial字体族字体是某个字体族的...
CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑大小写不敏感虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的.test{background-COLOR:#a00;width:100px;height: 100px; }虽然把background-color写为了background-COLOR，但仍然会生效，之所以写成小写是因为xhtml标准的关系，但是即使不是xhtml还是写成小写比较好，美观、易读而且可以应对可能的转换需求...
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" ...
这是2017年不能不了解和学习的一个CSS新特性，非常实用，考虑到现实世界浏览器的复杂性，该特性本应该先于其他新特性出来。我们已经知道使用媒体查询（Media Query）来检测屏幕尺寸，从而实现响应式界面设计。而特性查询则用来查询用户代理（如桌面浏览器）是否支持某个CSS3的特性，这个功能除了IE之外，已被其他浏览器所支持。语法格式@supports <supports-condition> {<group-rule-body> }特性查询使用@supports规则（和媒体查询...
一、缓动效果学习和利用贝塞尔曲线，默认支持ease，ease-in，ease-out,ease-in-out和linear等还提供一个cubic-beizer自定义贝塞尔曲线的起点和终点Css中只支持一条贝塞尔曲的运动，不能连续多段对cubic-beizer中控制锚点的水平坐标与垂直坐标互换，就可以得到任何调整函数的反向版本 cubic-beizer(.1,.25,1,.25)是ease的反向调整函数水平坐标只能在0~1的范围内，因为水平坐标表示的是时间垂直坐标可以超过此范围，表示为运动距离示...
在项目中需要快速检测浏览器是否支持某CSS3特性，比如检测是否支持“transform”，然后我的布局会有两种完全不同的版式。 当然除开本文介绍的这种快速方法，还有一种更有名和更通用的方法，那就是modernizr，运行脚本之后它会在html的class上加上浏览器支持的所有特性的列表。 优点：js是可配置的，不需要的特性检测可以在配置脚本中去掉基于特性检测js库简单好用除此之外还有一种不太好的方法，那就是判断浏览器的UA，不好的原因是...
在项目中需要快速检测浏览器是否支持某CSS3特性，比如检测是否支持“transform”，然后我的布局会有两种完全不同的版式。 当然除开本文介绍的这种快速方法，还有一种更有名和更通用的方法，那就是modernizr，运行脚本之后它会在html的class上加上浏览器支持的所有特性的列表。 优点：js是可配置的，不需要的特性检测可以在配置脚本中去掉基于特性检测js库简单好用除此之外还有一种不太好的方法，那就是判断浏览器的UA，不好的原因是...
这是2017年不能不了解和学习的一个CSS新特性，非常实用，考虑到现实世界浏览器的复杂性，该特性本应该先于其他新特性出来。我们已经知道使用媒体查询（Media Query）来检测屏幕尺寸，从而实现响应式界面设计。而特性查询则用来查询用户代理（如桌面浏览器）是否支持某个CSS3的特性，这个功能除了IE之外，已被其他浏览器所支持。语法格式@supports <supports-condition> {<group-rule-body> }特性查询使用@supports规则（和媒体查询...
本文标题的这副图片，是用Phosotshop制作的。但是，在搜索引擎中你却无法搜索到它，搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小，可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么，有没有一种新的方法可以避免这些缺点呢？有的，HTML5和CSS3就可以满足你的需求。甚至，它可以做的更多，更好。作为一名设计师，我们应当了解它们是什么东西，有什么特性，从而进一步思考通过HTML5和CSS3...
未来使用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来检测浏览器类型和版本，不过这种...
本文标题的这副图片，是用Phosotshop制作的。但是，在搜索引擎中你却无法搜索到它，搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小，可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么，有没有一种新的方法可以避免这些缺点呢？有的，HTML5和CSS3就可以满足你的需求。甚至，它可以做的更多，更好。作为一名设计师，我们应当了解它们是什么东西，有什么特性，从而进一步思考通过HTML5和CSS3...