随笔分类 -  css3

Web开发者不容错过的20段CSS代码
摘要：http://www.csdn.net/article/2013-05-24/2815422-20-Useful-CSS-Snippets-Every-Designer-Should-Have/1 阅读全文

posted @ 2013-05-27 12:43 小嘟 阅读(93) 评论(0) 推荐(0)

CSS3中的5个有趣的新技术
摘要：圆角、个别圆角、不透明度、阴影和调整元素大小。1：基本标记在我们开始这个教程之前，先来创建整个教程都要使用的基本标记。我们的xHTML需要一下div元素:#round, 使用CSS3代码实现圆角.#indie, 应用个别的几个圆角.#opacity, 展示新的CSS3实现不透明度的方式.#shadow,展示不使用Photoshop的情况下，使用CSS3来实现阴影效果.#resize, 展示如何使用某种CSS来实现重设大小的效果.综上所述，我们的xHTML应该是这样的:以下为引用的内容：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transit 阅读全文

posted @ 2013-03-19 22:39 小嘟 阅读(318) 评论(0) 推荐(0)

CSS3 Transform Matrix
摘要：css3中的transform让我们操作变形变得很简单，诸如，translate–移动，scale–缩放，rotate–旋转，skew–斜切。这几个属性很方便，也很简单，但是其中matrix我们就不常使用了吧。-webkit-transform: matrix(1, 0, 0, 1, 100, 100)看到这样一句css，你也许很讨厌怎么一堆的数字，你也许斜视matrix–css也能搞出这货？这篇文章我们一起探讨一下transform中的matrix。一、初识matrix2d matrix提供6个参数啊a,b,c,d,d,e,f其基本写法如下：回顾一下高中数学，或者线性代数，即可知道matri 阅读全文

posted @ 2013-03-05 16:02 小嘟 阅读(388) 评论(0) 推荐(0)

border-image
摘要：首先来一个素材图片whiteButton.png然后我们要做成这样的效果：代码（呵呵！请不要急，继续向下看）：代码<divstyle="-webkit-border-image:url(images/whiteButton.png)012012stretchstretch;-moz-border-image:url(images/whiteButton.png)012012roundstretch;border-image:url(images/whiteButton.png)012012stretchstretch;display:block;width:600px;bord 阅读全文

posted @ 2013-03-05 14:33 小嘟 阅读(144) 评论(0) 推荐(0)

box-shadow
摘要：语法：box-shadow：<length><length><length><length>||<color>取值：<length><length><length>?<length>? ||<color>：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色说明：设置块阴影box-shadow这个属性应用的非常普遍，可以使你的元素立刻变得漂亮起来，只是记得不要把值设得太离谱。box-shadow的四个参数：x-offset x轴偏移y-offset 阅读全文

posted @ 2013-03-05 14:23 小嘟 阅读(170) 评论(0) 推荐(0)

导航