当前目录: css3基础教程
css3 box-sizing属性

2015年5月20日  css3基础教程,css基础教程,前端资源   

box-sizing属性支持IE8以上浏览器。 box-sizing属性有2个值: content-box  //border和padding不计算入width之内 border-box  //border-box,border和padding计算入width之内 字面是解释很难懂它到底是干什么用的用实例说话: div.container { width:30em; border:1em solid; } div.box { width:50%; float:left; background:red; } <div class="container"> <div class="box">这个 div 占据左半部分。</div> <div class="box">这个 div 占据右半部分。</div> </div> 以上CSS可以让2个div并排,但是在这两个div中加入border或者padding就会撑开,如: 加了border或者padding就相当于多出了width部分会被撑出来,如果希望加上border或者padding,一样也保持...

Hover.CSS鼠标经过效果

2015年4月3日  css3基础教程,前端资源   

Hover.CSS 是一个有用的CSS3悬停效果集合,可用于动作调用,按钮,商标,特性图片等。 自定或直接应用到你自己的元素上都非常的简单。 hover.css可以用多种方式来使用; 可以复制粘贴你喜欢的效果到你自己的样式表里,也可以引用样式表。然后只需向你想要的元素需添加对应效果的class名称即可。如果你只打算使用一个或几个效果,最佳实践是复制粘贴一个效果。 http://pan.baidu.com/s/1sj7bwVb

CSS交替固定网页背景视觉差特效

2015年3月3日  css3基础教程,前端资源   

css 背景图片 视觉差 视觉差特效其实也就是使用到了background-attachment:fixed css背景属性复合型写法:background:url(img/cd-background-1.jpg) no-repeat center top fixed; 在线演示

CSS3 transform rotate(旋转)锯齿的解决办法

2015年2月13日  css3基础教程,前端资源   

由于现在主要接触移动端,不需要考虑IE等古董浏览器的兼容性问题,所以能最大程度的使用CSS3所带来的便捷。 在近期的一个项目中,根据设计需求,需要把图片以倾斜5度的方式来呈现出效果。于是便做了一个例子:-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度。本以为轻而易举,可遇到了问题。在Fireofx中显示正常,但在webkit内核下的浏览器中,如Chrome和Safari,图片边缘会有很明显锯齿。也可以说是webkit抗锯齿的一个BUG。另外需要补充的一点,如果图片上级元素含有overflow:hidden;属性,则会让锯齿感更明显。 通过查找相关的资料,终于找到了解决办法。便是使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果。我们只要简单的在CSS3 transform属性中加入translateZ...

字体自适应缩放

2015年2月5日  css3基础教程,前端资源   

字体自适应缩放,其实也不是什么难技术可以用JS控制也可以用css的@media根据屏幕宽度判断,缩放的比例。问题是屏幕要多宽字体缩放到什么比例才能符合大众这才是问题。 不说了直接放出代码: @media (min-width: 1700px) { html { font-size: 188%; } } @media (max-width: 1700px) { html { font-size: 188%; } } @media (max-width: 1680px) { html { font-size: 186%; } } @media (max-width: 1660px) { html { font-size: 184%; } } @media (max-width: 1640px) { html { font-size: 182%; } } @media (max-width: 1620px) { html { font-size: 180%; } } @media (max-width: 1600px) { html { font-size: 178%; } } @media (max-width: 1580px) { html { font-size: 176%; } } @media (max-width:...