我们先来看看CSS3 Api中对position属性的相关定义： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top...
1 /*对元素进行改变（移动、变形、伸缩、扭曲）*/ 2 .wrapper{ 3 margin:100px 100px auto auto; 4 width:300px; 5 height:200px; 6 border:2px dotted blue; 7 } 8 .wrapper div{ 9 width:300px;10 height:200px;11 background:red;12 color:blue;/*设置文本颜色 如果有的话*/13 text-align:center;/* 设置文本位置 如果子元素有的话 */14 line-height:200px;/* 设置行间距 */15 bor...
点击图片打开详细介绍页面
1 2 3 4 5 css-keyframes 6 7 8 9 10 11 1 @-webkit-keyframes move{ //定义名为move的动画函数 目前chrome对其支持较好 所以加-webkit-前缀 2 0%{ //时间达到0%时坐标位置为（0,0） 3 transform:translate(0px,0px);//应用该动画的标签位置为（0,0） 4 } 5 20%{ 6 transform:translate(100px,80px); 7 } 8 50%{ 9 transform:translate(200px,0px);10 }11 10...
最近学习CSS3， 以下CSS文件中的内容来自CSS手册。 可直接调用此CSS查看效果。 若有遗漏，待发现后补充进去。 @charset "utf-8";/* -------------------------此文档收集并介绍CSS3新增属性------------------------/*----------border-color---------设置对象边框的颜色。---------------------浏览器支持：Firefox3.0+---------------------取值：：颜色值。*/.border-color{ border: 8px solid #...
我记得，在工作中直接使用animation，只要能做出动画就完了，根本没有看每一个细节。 其实，这样做对于我们来说，的确没有错，因为工作中没有时间给你看每一个细节，大致看一篇就没下文了。 当我们想要好好理清头绪时，我才会想起以前见过的每一个知识点，然而这样做也没有错，但是这样做很明显不是明智的选择。 我觉得做一件事，都有一个计划，只有计划好，不懂得标记好，后面慢慢的一个个地解决，才会不落下学习的要点，好了，不...
首先，说一下clip-path属性，以前我也没有见过这个clip-path属性，网上搜了一下，原来clip-path是‘剪切’的意思。clip-path:polygon(x,y)属性，polygon(x,y)内的x表示横坐标的位置（px %）,y表示纵坐标的位置（px %）。说到底，这个clip-path剪切好比photoshop一样，可以替代photoshop剪切图片,只不过，代码和ps的区别在于代码要手动找路径，ps可以直接用魔术棒。这是我刚刚用clip-path剪切的图片： 其实，svg也能制作路径图...
当你看到这样的效果图是不是已经崩溃了 css3没出来之前大部分人基本都是用图片的方式拼出来的 腾讯邮箱就是这么做的 然后你想和设计说换直角吧。我用图片的好烦的感觉！而且我们还要兼容到ie6 她和你说别人能做到你为啥不能 然后本人只能用曾经被遗忘的一个小插件完成了这个奇怪的东西 PIE http://css3pie.com/documentation/pie-js/ 有了pie.js，做效果再也不用考虑浏览器了（当然这句水分比较足，和金坷垃一样...
box-shadow:阴影偏移值（可取正负值）;阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色 FireFox支持Box Shadow：-moz-box-shadow:2px 2px 5px #333; webkit内核的Safari和Chrome支持Box Shadow：-webkit-box-shadow:2px 2px 5px #333; Opera支持Box Shadow：box-shadow:2px 2px 5px #333; IE不支持Box Shadow; 知识扩充： Gecko(FireFox浏览器使用) webkit(Safari苹果公司开发,Chrome使用) Trident(IE浏览...
近来，小码哥有点小闲啊，因此，也就没有想更新的内容了！希望光顾过俺博客的“yin民”不要吐槽我啊，，，，， 不过，今天小码哥用到了一个对我来说相对陌生的HTML属性，就是mailto属性，说是属性吧，也不完全正确。因为它是作为href属性值得前缀来用的。 其大概功能就是会给某个邮箱地址添加上一个点击效果，点击邮箱地址后，会直接跳转到或进入到电脑上某个邮箱软件。方便用户更快捷的、无误的发送邮件！ 废话不多说了，直接上...
事先说明，本文范畴尚限制在2D的transform中。 对于css3的transform属性，真是爱不释手，有了这个特性，各种特效轻松搞定。引用一句歌词“旋转，跳跃，我不停歇”。transform就是这么时尚，就是这么任性。当然他任性的地方不只是在功能方面，还有在使用方面。我们看一下W3C官网中关于transform 2D的使用介绍。 看着有点多，首先先来分类一下：一个matrix，三个translate，三个scale，三个skew，一个rotate。而三...
CSS3的一些属性可能比较新，有一些书从国外翻译到国内的时间上会延缓1-2年。所以有一些东西还需要及时整理。 下面说一下CSS3的一个属性：transform 其实字面上的意思已经很明显了就是变化，变幻的意思。 那到底怎么个变法？ transform可以选下面几个值： 旋转-rotate（rotatex,rotatey） 倾斜-skew 缩放-scale 移动-translate 下面给出的例子可能都非常简单，真正详细的还是看W3School毕竟是定期更新的...
HTML属性为 HTML 元素提供附加信息（提供了有关 HTML 元素的更多的信息）。 属性总是以名称/值对的形式出现，比如：name="value"。 属性总是在 HTML 元素的开始标签中规定。 aaa 说明：img元素中包含src属性和alt属性；a元素中包含href和title属性。 src属性：引用图片，它的值是图像文件的 URL，可以是相对路径或绝对路径。 alt属性：规定在图像无法显示时的替代文本。 href属性：用于指定超链接目标的 URL，可以是相...
同时声明中文字体的字体名称（英文）和显示名称（中文）： font-family:SimSun,"宋体"; font-family:"Microsoft YaHei","微软雅黑"; font-family:STXihei,"华文细黑","Microsoft YaHei","微软雅黑"; 永远不要忘记声明英文字体，并且英文字体应该在中文字体之前 Font-family: Georgia, SimSun, “宋体” 在最后补充英文字体族的名称。字体族大体上分为两类：非衬线sans-serif和衬线serif font-family:Georgia...
一 CSS文字属性： color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-...