perspective属性及相关的perspective-origin属性都是用来控制3D图形空间中坐标轴上的距离的,下面我们就来分享CSS3的perspective属性设置3D变换距离的示例方法,当然后面也会讲到perspective-origin的用法:perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。...
flex布局毫无疑问是当今Web页面的最强大布局方式,box-flex弹性盒模型是其中的一个代表,这里我们就来以实例讲解CSS3中的box-flex弹性盒模型布局box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome（-webkit）。一、box-flex属性box-flex主要让子容器针对父容...
本篇文章讲述使用CSS3中calc()属性来以算式表达尺寸数值的说明calc()的用法十分巧妙,可以像我们在学校做数学应用题那样列式子来计算长度宽度等值,从而一定程度上实现自适应布局,下面我们就来介绍如何使用CSS3中的calc()属性来以算式表达尺寸数值我们想要实现页面自适应布局时，通常因为margin的存在，而比较麻烦；有时候想要实现宽度自适应的输入框时，也因为padding或margin的存在，而相当繁琐，同时由于浏览器兼容性而导致最终效...
零、概览CSS2支持的属性选择器用一个表达式[{属性 | 属性 {= | |= | ~=} 值}]1.[class="a"]只能匹配class="a"的元素2.[class~="a"]则可以匹配class="a"、class="a b"的元素3.[lang|=en]则可以匹配lang="en"、lang="en-us"的元素。CSS3新增*=、^=、$=三种匹配方式[{属性 | 属性 {*= | ^= | $=} 值}]：1.*=表示模糊匹配，[href="163"]可以匹配href="163.com"、href="mail.163.com"等元素；2.^=表示以指定字符开头，[href^="/"]则匹配...
p往往会因为内边距的设置而使整个层宽度和高度超出预定范围,而CSS3的box-sizing属性可以简单解决这样的现象,下面我们就来详细解说使用CSS3的box-sizing属性解决p宽高被内边距撑开的问题有时我们会给页面的元素（比如p）设置个固定的高度或宽度。但如果给这个p又设置了内边距或者边框的话，那么这个p就会被撑大。也就是其实际的尺寸变成了：设置的宽高尺寸+内边距+边框。这样就有可能对我们的布局造成影响，如果不想让内边距和边框影...
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”transition属性的值包括以下四个： ?transition-property： 指定对HTML元素的哪个css属性进行过渡渐变处理，这个属性可以是color、width、height等各种标准的css属性。 ?transition-duration：指定属性过渡的持续...
要使用animation动画，先要熟悉一下keyframes,Keyframes的语法规则:命名是由”@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则。不同关键帧是通过from（相当于0%）、to（相当于100%）或百分比来表示（为了得到最佳的浏览器支持，建议使用百分比），如下定义一个简单的动画：@keyframes myfirst /*定义动画名*/{ 0% {background:red; left:0px; top:0px;} /*定义起始...
column-fill属性会将不同高度的指定列以高度差最小化的方式进行对齐,这里我们就来看一下CSS3的column-fill属性对齐列内容高度的用法详解:column-fill 属性, 指定列之间高度是否对齐时使用。<规定如何对列进行填充>属性值balance 可能的话，所有的列内容以相同方法对齐（默认值） <对列进行协调。浏览器应对列长度的差异进行最小化处理。>auto 后面的列填充在第一个列的后面。 <按顺序对列进行填充，列长度会各有不同。>※<>内容为其...
文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-...
animation-play-state介绍animation-play-state 属性规定动画正在运行还是暂停。p{animation-play-state:paused;-webkit-animation-play-state:paused; /* Safari 和 Chrome */}浏览器支持：Internet Explorer 10、Firefox 以及 Opera 支持 animation-play-state 属性。Safari 和 Chrome 支持替代的 -webkit-animation-play-state 属性。注释：Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。语法：animati...
CSS中的-webkit-tap-highlight-color属性，简单来说功能就是手机端点击时的背景色设置，下面这篇文章主要介绍了CSS3中这个鲜为人知的属性：-webkit-tap-highlight-color的相关资料,需要的朋友可以参考借鉴，下面来一起看看吧。-webkit-tap-highlight-color这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-h...
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字content : ”插入的文章”，或者 content:none 不插入内容#html <h1>这是h1</h1> <h2>这是h2</h2> #css h1::after{content:"h1后插入内容" } h2::after{content:none }嵌入文字符号可以使用content属性的 open-quote 属性值和 close-quote 属性值在字符串两边添加诸如括号...
通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性从而通过改变transform：rotate属性值来达到3d立方体旋转的效果HTML代码块：<body> <input type="button" class="open" value="点击散开"/> <input type="text" class="xNum" va...
今天呢，翠儿姐给大家讲解CSS3教程-边框的最后一种属性：border-image 属性。本文主要介绍了这款属性的定义以及用法，希望在前端开发工作中可以帮到需要帮助的同学。看一下具体实例：将图片规定为包围 div 元素的边框：div { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; }浏览器支持：Internet Explo...
Hello！前端开发的小伙伴们，看完CSS3教程-边框的第1种属性，是不是很期待它的第二种box-shadow 属性呢？大家不要着急，前端开发网会给大家一一介绍的。首先我们先来看一个实例：向 div 元素添加 box-shadow：div { box-shadow: 10px 10px 5px #888888; }浏览器支持：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。定义和用法：box-shadow 属性向框添加一个或多个阴影。提示：请使用 border-image-* 属...