-
http://www.ccweb.name/archives/148查看全部
-
text-shadow:x-偏移量，y-偏移量，阴影模糊程度，颜色； box-shadow:x-偏移量，y-偏移量，阴影模糊程度，阴影扩展程度，颜色；查看全部
-
background-image:linear-gradient( to bottom/to left/to top/to right/to top left/to top right,color1,color2);查看全部
-
RGBA RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法： color：rgba(R,G,B,A)查看全部
-
http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image%E8%AF%A6%E8%A7%A3%E3%80%81%E5%BA%94%E7%94%A8%E5%8F%8Ajquery%E6%8F%92%E4%BB%B6/查看全部
-
border-image绘制原理简述 我是这样理解的：共存在两个九宫格，一个是边框图片，还有一个就是边框本身，九个方位关系一一对应。边框本身的特性让其变成了一个九宫格，四条边框交错，加上其围住的区域，正好形成一个九宫格。边框图片则是通过图片剪裁实现了九宫格。这是理解绘制原理的基础。 1、调用边框图片 border-image的url属性，通过相对或绝对路径链接图片。 2、边框图片的剪裁 border-image的数值参数剪裁边框图片，形成九宫格。 3、剪裁图片填充边框 边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。 4、执行重复属性 被填充至边框九宫格四个角落的的边框图片是不执行重复属性的。上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性，而中间的那个格子则水平重复和垂直方向的重复都要执行。 5、完成绘制，实现效果查看全部
-
谷歌和苹果的浏览器：-webkit 微软：-ms opera:-o 火狐：-moz查看全部
-
原理： 外投影：颜色块在底层，通过设置x,y偏移量，使其相对于原来的位置偏移。 阴影模糊半径：值越大，边缘越模糊； 阴影扩展半径：其实就是扩大阴影范围； 除了阴影模糊半径必须为正，其他可正可负； box-shadow:x偏移值 y偏移值 [阴影模糊半径] [阴影扩展半径][颜色][投影方式] 投影方式：inset内投影 默认：外投影；查看全部
-
原理是：角由一个半径为那么设定大小的四分之一的圆取代查看全部
-
变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示： 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。 transform-origin取值和元素设置背景中的background-position取值类似，如下表所示： 示例展示： 通过transform-origin改变元素原点到左上角，然后进行顺时旋转45度。 HTML代码： <div class="wrapper"> <div>原点在默认位置处</div> </div> <div class="wrapper transform-origin"> <div>原点重置到左上角</div> </div> CSS代码： .wrapper { width: 300px; height: 300px; float: left; margin: 100px; border: 2px dotted red; line-height: 300px; text-align: center; } .wrapper div { background: orange; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .transform-origin div { -webkit-transform-origin: left top; transform-origin: left top; }查看全部
-
变形--矩阵 matrix() matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。 示例演示：通过matrix()函数来模拟transform中translate()位移的效果。 HTML代码： <div class="wrapper"> <div></div> </div> CSS代码： .wrapper { width: 300px; height: 200px; border: 2px dotted red; margin: 40px auto; } .wrapper div { width:300px; height: 200px; background: orange; -webkit-transform: matrix(1,0,0,1,50,50); -moz-transform:matrix(1,0,0,1,50,50); transform: matrix(1,0,0,1,50,50); }查看全部
-
translate支持百分比，这样可以将元素定位到水平居中，垂直居中 .wrapper { padding: 20px; background:orange; color:#fff; position:absolute; top:50%; left:50%; border-radius: 5px; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }查看全部
-
HTML代码： <div class="wrapper"> <div>我向右向下移动</div> </div> CSS代码： .wrapper { width: 200px; height: 200px; border: 2px dotted red; margin: 20px auto; } .wrapper div { width: 200px; height: 200px; line-height: 200px; text-align: center; background: orange; color: #fff; -webkit-transform: translate(50px,100px); -moz-transform:translate(50px,100px); transform: translate(50px,100px); }查看全部
-
变形--位移 translate() translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动）查看全部
-
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。查看全部
举报
0/150
提交
取消