研究了下css3中的 transform变换属性中的3D属性效果和看到的一篇好文章了解到了3D的学习;好文章地址:http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ 下面只是自己能读懂自己写的代码例子:<style>#box{-webkit-perspective:800px;//定义3D场景大小-webkit-transform-origin:50% 50%;//定义3D场景的中心点perspective:800px;transform-origin:50% 50%;}.box{width:200px;height:20...
css的盒模型包含了content（元素自身）、padding（内边距）、border（边框）及margin（外边距）。如图，浏览器控制台elements的computed可以清晰显示元素盒模型，鼠标多动动就明白了：（蓝色区域表示content元素自身，这里是整个窗口的内容）盒模型有两种：标准模式和怪异模式。在<!DOCTYPE>声明缺失时就会在ie6、ie7、ie8下触发怪异模式标准模式下：盒子总宽度/高度 = content + padding + border + margin，content的width/heigh...
浏览器支持度CSS3属性： columns：规定列的宽度和列数 默认宽度、列数值为auto column-width:每栏的宽度 column-gap :两栏之间的间距距离 column-count : 栏目的数目 column-rule : color(色值) width(宽度) style(线条样式) 分栏中的分割线的颜色宽度及样式的设定 1、border-radius属性(圆角边框)eg:结合不同浏览器兼容问题，使用该CSS3新属性 eg: 2、box-shadow属性（阴影） eg:结合不同浏览器兼容问题，使用该CSS3新属性 eg: 3、...
通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性从而通过改变transform：rotate属性值来达到3d立方体旋转的效果HTML代码块：<body> <input type="button" class="open" value="点击散开"/> <input type="text" class="xNum" va...
css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开始慢慢的去了解并使用css3（还有html5），因为我觉得这是一种趋势，它是一种已经被制定的标准。我并不是专门在做前端的，只是有时不得不自己去写这些东西，有时喜欢研究研究这些，所有以上只是我的个人看法。 1、在之前我想在页面做出一个边框为圆角框，貌似需要写挺多css代码的（可能我没了解到更好的办法），在css3里有一个属性...
前言 CSS3中出现了几种关于背景图片的新属性：background-origin、background-clip、background-position等.之前大致了解了下，但是background-origin与background-clip的区别尚不清楚。就google了一篇，发现不错，翻译下来吧。 原文连接 : The New Background Position in CSS3 Say Hello to Background-Origin and Background-Clip, CSS3 new features! ps: 原文在线代码演示已由codepen.io 搬至runjs.cn background-posi...
这里把CSS3的新属性单独拿出来讲解一下： border-radius 属性用于创建圆角 div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */} border-shadow 用于向方框添加阴影 div{width:300px;height:100px;background-color:#ff9900;-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */box-shadow: 10px 10px 5px #888888;} border-image 属性允许您规定...
上篇随笔中介绍了CSS3中，通过标签的属性寻找特定标签的方法。在该篇随笔中，我们使用结构选择器实现对特定标签的选择。按照 -child 和 -of-type，可区分为两类。-child表示寻找父标签的子节点，-of-type表示以标签类型寻找父标签中的子节点。 1、-child R：nth-child(value){} (1) value=1,2,3,...，表示：在R标签的父标签中，从上往下寻找第value个子节点，并且该标签类型必须为R才有效； ...
基于css3新属性transform，实现3d立方体的旋转 通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示 实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性 从而通过改变transform：rotate属性值来达到3d立方体旋转的效果 HTML代码块： //X轴旋...
在这篇文章中，我们将讨论CSS3中添加到background属性的两个新的扩展属性Background-Origin和Background-Clip，有需要的朋友可以看一看，希望给你带来帮助。Background-Origin在Background-Origin属性出现之前，当我们向元素添加背景图像时，图像位置从元素中填充的左上角开始。打印默认背景原点位置的屏幕，如果background-position设置为左（left）0，上（top）0 ，您可以在填充区域（红点）处看到背景图像。（推荐教程：CSS3视频...
本章给大家说说CSS3新属性currentColor的使用以及currentColor属性的兼容性。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”，例如：.xxx { border: 1px solid currentColor; }currentColor表示“当前的标签所继承的文字颜色”，换种方式表示就是：currentColor = color的值。凡事需要使用颜色值的地方，都可以使用currentColor替换，比...
这次给大家带来css3的新属性box-sizing详解，css3属性box-sizing的注意事项有哪些，下面就是实战案例，一起来看一下。在了解box-sizing之前，让我们来稍稍回顾一下盒子模型，模型分为：标准盒模型+IE盒模型。那这有什么区别呢？见图所示：从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、conten...
一、前言 calc()看起来像是javascript中的一个函数，而事实上它是用在Css中的，可以用它来计算长度（宽度或高度)，能够自动根据不同尺寸的屏幕自动调接数值，从而很轻松的实现自适应布局展示在不同尺寸屏幕下。项目中常常碰到要始终居中的元素，当然想到的第一个就是使用margin：0 auto；或者使用定位和margin结合的这种简单的方法，当同事告诉我让我去研究研究calc的时候才真正的深入了解这个Css3中的新东西。二、使用方法 ...
通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性从而通过改变transform：rotate属性值来达到3d立方体旋转的效果HTML代码块：<body> <input type="button" class="open" value="点击散开"/> <input type="text" class="xNum" va...
本章给大家说说CSS3新属性currentColor的使用以及currentColor属性的兼容性。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。currentColor顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”，例如：.xxx { border: 1px solid currentColor; }currentColor表示“当前的标签所继承的文字颜色”，换种方式表示就是：currentColor = color的值。凡事需要使用颜色值的地方，都可以使用currentColor替换，比...