随笔分类 - 水车--CSS
有关css， css3知识点，教程等内容
摘要：Transform根据我的理解，transform和width、height、background一样，都是dom的属性，不同的是它是css3旗下的，比较屌，能够对原来的dom元素进行移动、缩放、转动、拉长或拉伸，跟canvas上的某些api神似，这么说来transform好像能干些js才能干的事。...
阅读全文
摘要：CSS3 过渡通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡属性属性描述CSStransition简写属性，用于在一个属性中设置四个过渡属性。3transition-property规定应用过渡的 CSS ...
阅读全文
摘要：3D 转换1. rotateX()2. rotateY()otateX() 方法通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。示例：div{transform: rotateX(120deg);-webkit-transform: rotateX(120deg); /* S...
阅读全文
摘要：CSS3 转换通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。2D 转换在本次，您将学到如下 2D 转换方法：1. translate()2. rotate()3. scale()4. skew()5. matrix() translate() 方法通过 translate()...
阅读全文
摘要：使用自己需要的字体在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：实例 使用粗体字体您必须为粗体文本添加另一个包含描述...
阅读全文
摘要：CSS3 文本效果1. text-shadow2. word-wraptext-shadow属性使用方法text-shadow属性使用方法如下所示。text-shadow:length length length color 其中，前面三个length分别指阴影离开文字的横方向距离、阴影离开文字的...
阅读全文
摘要：css3背景1. background-size2. background-origin3. background-clip示例：className{ background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 ...
阅读全文
摘要：border-image属性.className{ border-image:url(/course/54d1cae088dba03f2cd1fec1/img/border.png) 20 20 20 20 / 20px; -webkit-border-image:url(/course/54d...
阅读全文
摘要：CSS3的属性选择器主要包括以下几种：1. E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；2. E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；3. E[attr*="value"]：指定了属性名，并且有属性值...
阅读全文
摘要：最近在研究iconfont图标字库，找了一些比较好的在线字库。大都是开源的，而且各有特色！阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。fontello http://f...
阅读全文
摘要：图标字体的使用1. 什么是图标字体图标字体是字体文件，用符号和字形的轮廓代替标准的文字数字式字符。是专门为用户界面设计，就像系统字体一样，使用CSS@font-face在web浏览器里展示。使用图标字体来生成图标相对于基于图片的图标来说，有如下的好处：1.自由的变化大小2.自由的修改颜色3.添加阴影...
阅读全文
摘要：Font Awesome 是一套专门为Twitter Boostrap设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标，除了包括 Twitter Boostrap的默认图标外，还有社交网络图标、Web应用程序图标和编辑器图标等等，可以免费用于商业项目主要特色：✓ 一种字体，249个...
阅读全文
