冰剑'blog

Css content属性详解

xunzou@gmail.com (冰剑) — Tue, 06 Jul 2010 18:54:17 +0800

Content作为css的一个属性，它可以和伪对象:before :after一起使用。

例如：

CSS

[CODE=css]
.xunzou:before {
content:"你好啊";
color:#F00;
}
[/CODE]

html

[CODE=html]

欢迎光临我的blog

[/CODE]

浏览器显示的应该是：

这里红色的文字，你好啊，由content生成

Content 的值还可以设置为元素的属性

例如：

CSS

[CODE=css]
.xunzou2:hover{position:relative;z-index:1}
.xunzou2:hover:after{
content:attr(href);
padding:8px;
background:#DCDCDC;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
position:absolute;
left:0;
top:150%;
z-index:2
white-space: nowrap;
-moz-box-shadow:2px 2px 5px #333;
-webkit-box-shadow:2px 2px 5px #333;
box-shadow:2px 2px 5px #333;
}
[/CODE]

html

[CODE=html]
欢迎光临我的blog
[/CODE]

浏览器显示的应该是：

点此查看demo

继续阅读《Css content属性详解》的全文内容...

分类: 前端技术 | Tags: CSS content | 添加评论(0)

视频播放缩略图增加播放按钮 (2010-3-8 18:5:27)
css属性之clip (2010-2-25 15:46:54)

css3多列布局模块研究

xunzou@gmail.com (冰剑) — Mon, 31 May 2010 17:30:20 +0800

CSS3多列布局模块是css3提出的新的东西，可以将文章分成多列显示。

下图是应用了column样式后在webkit内核浏览器里的显示效果

column属性详解：

多列有四个属性，可以随意用1到4个：

column-count：列数
column-gap：两列中间的空隙;
column-rule：两列中间的分割比如：1px solid #333;
column-width：每列固定宽度;

用到的css：

[CODE=css] -webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-rule:5px solid #333;
-webkit-column-width:100px;

-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule:5px solid #333;

column-count: 3;
column-gap: 10px;
column-rule:5px solid #333;
column-width:50px;
[/CODE]

查看demo记得用firefox、以及chrome和Safari浏览哦

w3c官方的解释

CSS3info

继续阅读《css3多列布局模块研究》的全文内容...

分类: 前端技术 | Tags: css3 column | 添加评论(2)

用css3创建的3d效果的“带子” (2010-4-24 12:23:30)
CSS3属性选择符及其伪类 (2010-3-13 15:10:41)

腾讯微博邀请码十三个（已经全部注册完毕）

xunzou@gmail.com (冰剑) — Tue, 11 May 2010 08:26:29 +0800

腾讯微博邀请码曾经一码难求，现在是一码难送，特给大家送一些微博邀请码：

注册地址：http://t.qq.com/

划删除线的为已经使用过的邀请码，请大家使用过后留言注明一下，方便其他人注册。

8个微博邀请码：

~~http://t.qq.com/invite/fca1a1126d1deb3259c5~~

~~http://t.qq.com/invite/b25c9135a3b22cadda73~~

~~http://t.qq.com/invite/f50f0ca41787927c33b1~~

~~http://t.qq.com/invite/cf9b98a0094cdf6f66b7~~

~~http://t.qq.com/invite/7c9e05dfc370de2b0a55~~

~~http://t.qq.com/invite/5cd3bf2bcec7444da451~~

~~http://t.qq.com/invite/10fef405f454f9ab1345~~

~~http://t.qq.com/invite/a2e9e9b686c5709c63e9~~

请大家用过之后在下面留言，我好标记用过的邀请码。

刚发完又有5个了，再增加5个：

~~http://t.qq.com/invite/a50bef60d39001ab6589~~

~~http://t.qq.com/invite/8f91095181cfcc99bcef~~

~~http://t.qq.com/invite/eeae2aa54b4a07f1ec9f~~

~~http://t.qq.com/invite/353598790e29547a000b~~

~~http://t.qq.com/invite/5b6ec30c925a92618885~~

继续阅读《腾讯微博邀请码十三个（已经全部注册完毕）》的全文内容...

分类: 乱七八糟 | Tags: | 添加评论(3)

还没有相关文章，您来说两句？

用css3创建的3d效果的“带子”

xunzou@gmail.com (冰剑) — Sat, 24 Apr 2010 12:23:30 +0800

用css3创建的3d效果的“带子” ，其实我也不知道该怎么称呼它。

看一下效果吧

主要用到了css3的阴影、圆角以及css实现的三角形的等效果

关于css3以及css实现三角形的文章：

css代码：
[CODE=css]
.box {
width:600px;
height:350px;
margin:0 auto;
padding:30px;
border:1px solid #666;
}
.innerbox {
width:260px;
height:280px;
color:#333;
background:#ccc;
margin:0 auto;
padding:50px 10px 0;
border:1px solid #333;
border-radius:10px;/*opera 、IE9*/
-moz-border-radius:10px;/*Firefox*/
-webkit-border-radius:10px;/*Safari、Chrome*/
border-radius:10px;
box-shadow:2px 2px 8px #666,-2px -2px 8px #666;/*opera 、IE9*/
-moz-box-shadow:2px 2px 8px #666,-2px -2px 8px #666;/*Firefox*/
-webkit-box-shadow:2px 2px 8px #666,-2px -2px 8px #666;/*Safari、Chrome*/
position:relative;
}
.innerbox p{text-indent:2em;line-height:2;font-size:14px;}
h2 {
width:302px;
height:30px;
line-height:30px;
background:#fff;
text-align:center;
color:#333;
position:absolute;
left:-12px;
top:10px;
border:1px solid #333;
box-shadow:2px 2px 8px #333;/*opera 、IE9*/
-moz-box-shadow:2px 2px 8px #333;/*Firefox*/
-webkit-box-shadow:2px 2px 8px #333;/*Safari、Chrome*/
text-shadow:2px 2px 5px #CCC;
border-radius:5px 5px 0 0;/*opera 、IE9*/
-moz-border-radius:5px 5px 0 0;/*Firefox*/
-webkit-border-radius:5px 5px 0 0;/*Safari、Chrome*/
}
em {position:absolute;top:42px;width:0;height:0;overflow:hidden;font-size:0;border:5px solid;}/*实现三角形*/
em.s1{left:-11px;border-color: #333 #333 transparent transparent;}/*实现左三角形*/
em.s2{right:-11px;border-color: #333 transparent transparent #333;}/*实现右三角形*/
[/CODE]
html代码
[CODE=html]

css3创建的3d

左阴影
右阴影

这里是用css3创建的3d绶带，暂且这么叫它吧！

[/CODE]

demo地址：http://www.xunzou.com/demo/ribbon/ribbon.html

继续阅读《用css3创建的3d效果的“带子”》的全文内容...

分类: 前端技术 | Tags: css3 | 添加评论(0)

css3多列布局模块研究 (2010-5-31 17:30:20)
CSS3属性选择符及其伪类 (2010-3-13 15:10:41)

命题作文

xunzou@gmail.com (冰剑) — Fri, 09 Apr 2010 13:18:50 +0800

我们在小学甚至初中的时候，作文课上，老师一般会出一个题目，然后让大家围绕这个题目去作文。

比如老师今天布置的作文题目是《蜗牛》，然后说，同学们开始写吧，这样写出来的作文是不是都不一样呢？有的同学可能会写：蜗牛是一种动物，它背着一个壳，它是世界上脚最多的动物……；也有同学可能会写：蜗牛就像当今的人类，为了一个房子，一辈子就被拴在房子里，啥也干不成，为了这个房子，奋斗一辈子……

不同的人对这个题目有不同的理解，你的“蜗牛”可能并不是我的“蜗牛”。所以在传达事物的同事，一定要告知，你的蜗牛是长腿的蜗牛，还是背房子的蜗牛。在一个团队中，有着很多的交流沟通，作为一个团队的舵手、领航员，有责任、有义务告知队友你的蜗牛是干什么的，而不仅仅是给个命题作文，让队友去自由发挥。自由发挥有的符合老师的要求，自然会的高分；有的不符合要求，那么就会的个差分。这自然不是老师想要的，也不是学生喜欢的。

有时候，学生是喜欢他的老师给与一定的指导，给学生列一个提纲，让他知道我写这个作文的目的是什么，并不是没有目的的去“创造”，去编作文。

适当的给与指导，不是让学生去完成这个“命题作文”的任务，而是让其知道写这篇作文的意义，把它当作自己的事情去做。这样，完成的作文，就会达到老师的满意，学生的满足（成就感）。在团队中，领航者要使你的队友明白明明白白的去做一件事情，从而和团队共同去完成这个目标，并使其在完成后有成就感，这样队友才能够更加努力的去做，才能够提升团队的战斗力。

继续阅读《命题作文》的全文内容...

分类: 心情日记 | Tags: 团队 | 添加评论(0)

还没有相关文章，您来说两句？

CSS3属性选择符及其伪类

xunzou@gmail.com (冰剑) — Sat, 13 Mar 2010 15:10:41 +0800

CSS3增加了很多非常有用的选择符及其伪类，利用这些新的技术，可以在我们的日常工作中节省不少的时间，并且减少HTML及CSS文件的大小。

今天主要介绍一下CSS3新增加的属性选择符和伪类。下表仅是其中的一部分，有些伪类没有在下面表中，如:root等伪类。

CSS3选择符语法概览：

上表来自于蓝色理想（有修改）：http://www.blueidea.com/tech/web/2008/5708.asp

1. 字串匹配的属性选择符：

a) E[att^="val"] 匹配具有att属性、且值以val开头的E元素

例如：

[CODE=html]

[/CODE]

CSS代码：

[CODE=css]div[class^="no"] {background:#F00;}[/CODE]

这个代码表示：class属性以”no”开头的div元素背景颜色将会是红色（#F00）;

查看演示

b) E[att$="val"]匹配具有att属性、且值以val结尾的E元素

例如：

[CODE=html]

[/CODE]

CSS代码：

[CODE=css]div[class$="zou"] {background:#000;}[/CODE]

这个代码表示：class属性以”zou”结尾的div元素背景颜色将会是黑色（#000）;

查看演示

c) E[att*="val"] 匹配具有att属性、且值中含有val的E元素

例如：

[CODE=html]

[/CODE]

CSS代码：

[CODE=css]div[class*="ab"] {background:#CCC;}[/CODE]

这个代码表示：class属性的值包含有”ab ”的div元素背景颜色将会是灰色（#CCC）;

查看演示

我们其实可以用这个属性选择符来做一个这样的事情，比如说你的网站上有外站的连接，比如说友情连接等，你可以用属性选择符来匹配包含http值的元素使其后面增加一个小图标（注意本站的文章中已经有类似的效果）。但是有时候自己的站也会加上绝对地址，这样的话，站内连接也会加上图标了。我们可以再次使用属性选择符来消除上面的本站内的效果。
例如：

[code=css]a[href^=”http://”] , a[href^=”https://”] {/*现在一些站也有以https连接的，所以要加上这个。*/
padding:0 15px 0 0;/*右边空出15px来放置小图片*/
background:url(图片地址) no-repeat right top;/*将图片放置与右上角*/
}
a[href*=”xunzou”]{ /*这里以我的网站为例，取消站内连接的小图标*/
padding:0;/*去掉右边空出的15px*/
background:none;/*去掉图片*/
}[/code]

2. 结构性伪类

a) E:nth-child(n) 匹配父元素中的第n个子元素E

这个元素在你做列表或者数据表格的时候将非常有用。例如：E:nth-child(2) 在这里的数字2.将选中第二行。最常见的“隔行换色”就可以用这个伪类轻松的做出。例如：E:nth-child(2n+1){background:#F00};这个是隔行换色。这里的n可以取任何整数值，你也可以给n取和负值。

这里是一些常用的取值，希望可以帮助大家理解这个属性。

这里有个网址你可以测试它的数值以及产生的效果：

http://css-tricks.com/examples/nth-child-tester/

关于E:nth-child(n)的一些其他文章：

http://css-tricks.com/how-nth-child-works/
http://devsnippets.com/article/5-advanced-css-pseudo-class.html
查看演示

b) E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E

这个匹配的是父元素中倒数第n个子元素。例如：

[CODE=css]
#nthlc li:nth-last-child(2) {
background: #999;/*这里第五个li将会显示背景色为灰色（#999）*/
}
[/CODE]

CSS代码：

[CODE=html]

第1个li
第2个li
第3个li
第4个li
第5个li
第6个li

[/CODE]
查看演示

c) E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E

例如：

[CODE=css]
#nthot em:nth-of-type (2) {
background: #999;/*这里第2个em将会显示背景色为灰色（#999）*/
}
[/CODE]

html代码：

[CODE=html]

这里是第1个p

这里是第2个p

这里是第1个em
这里是第2个em

这里是第3个p

[/CODE]
查看演示

d) E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

例如：

[CODE=css]
#nthlc em:nth-last-of-type(2) {
background: #999;/*这里第1个em将会显示背景色为灰色（#999）*/
}
[/CODE]

html代码：

[CODE=html]

这里是第1个p

这里是第2个p

这里是第1个em
这里是第2个em

这里是第3个p

[/CODE]
查看演示

e) E:last-child匹配父元素中最后一个E元素

例如：

[CODE=css]
#lc p:last-child {
background: #999;/*这里最后一个p将会显示背景色为灰色（#999）*/
}
[/CODE]

html代码：

[CODE=html]

这里是第1个p

这里是第2个p

这里是第1个em
这里是第2个em

这里是第3个p

[/CODE]
查看演示

f) E:first-of-type匹配同级兄弟元素中的第一个E元素

例如：

[CODE=css]
#fot p:first-of-type{
background: #999;/*这里第1个p将会显示背景色为灰色（#999）*/
}
[/CODE]

html代码：

[CODE=html]

这里是第1个em
这里是第2个em

这里是第1个p

这里是第2个p

这里是第3个p

[/CODE]
查看演示

g) E:only-child匹配属于父元素中唯一子元素的E

例如：

[CODE=css]
#oc p:only-child{
background: #999;/*这里唯一的1个p将会显示背景色为灰色（#999）*/
}
[/CODE]

html代码：

[CODE=html]

这是div里的1个em

这里div里的第1个p和em不在同一个父元素

这里div里的第2个p

[/CODE]
查看演示

h) E: only-of-type 匹配属于同类型中唯一兄弟元素的E

例如：

[CODE=css]
#pc08 p:only-of-type {
background: #999;/*这里唯一的1个p将会显示背景色为灰色（#999）*/
}[/CODE]

html代码：

[CODE=html]

E:only-of-type

这里是第1个em
这里是第2个em

这里是唯一的1个p

这里是第3个em
这里是第4个em

[/CODE]
查看演示

i) E:empty匹配没有任何子元素（包括text节点）的原色E

例如：

[CODE=css]
div em:empty{
background: #999;/*这里空元素p将会显示背景色为灰色（#999）*/
}[/CODE]

html代码：

[CODE=html]

这里是第1个p

上面第二个p背景色为灰色

[/CODE]
查看演示

j) E:target匹配相关URL指向的E元素

例如：

[CODE=css]
div p:target{
background: #999;/*这里空原色p将会显示背景色为灰色（#999）*/
}[/CODE]

html代码：

[CODE=html]

这是第二个p

这是第三个p，有个id是pid，这个会变色

[/CODE]
查看演示

k) E:not(s) 匹配所有不匹配简单选择符s的元素E

例如：

[CODE=css]
div p:not(.ab){
background: #999;/*这里.ab将没有背景色，其它p显示背景色为灰色（#999）*/
}[/CODE]

html代码：

[CODE=html]

这里是第1个p

这里是第2个p

这里是第3个p

[/CODE]
查看演示

l) E ~ F匹配E元素之后的F元素

例如：

[CODE=css]
div p:not(.ab){
background: #999;/*这里.ab将没有背景色，其它p显示背景色为灰色（#999）*/
}[/CODE]

html代码：

[CODE=html]

这里是第1个p

这里是第2个p

这里是第3个p

[/CODE]
查看演示

这里基本上罗列的一些css3的属性选择符以及伪类，还有一些没有写上。欢迎大家拍砖。感谢腾讯Webteam 开发的CSS3手册，以上有一部分内容参考了CSS3手册。

浏览器支持：以上12个伪类仅E ~ F 兄弟选择器IE6以上浏览器支持外，其他IE6及其以下浏览器均不支持。但是最新的firefox、opera、Safari 和chrome都支持这些伪类。

继续阅读《CSS3属性选择符及其伪类》的全文内容...

分类: 前端技术 | Tags: css3 伪类属性选择符 | 添加评论(0)

css3多列布局模块研究 (2010-5-31 17:30:20)
用css3创建的3d效果的“带子” (2010-4-24 12:23:30)

IE的条件语句整理

xunzou@gmail.com (冰剑) — Fri, 12 Mar 2010 12:07:13 +0800

众所周知，IE6自出生以来，为人们付出了汗马功劳。但是，现在看来，它已经非常的老态龙钟了。它的儿子（IE7）和孙子（IE8）都已经出来，并且占有了一定的市场了。虽然它的接班人相比它来说对web标准的支持已经有了很大的进步，但是和其他的浏览器（Firefox、opera、Google chrome、Apple safari等）对比的话，IE还是有一些差距的。

因此，平时在工作中，我们总是为IE6或者IE浏览器写一些兼容性的样式。比如属性前的下划线“_”、比如“*html #nav{/*想要IE6展示的样式*/}”等等。这样的写法让IE和其他的浏览器有了相同的表现，但是我们的代码却不是那么好看了。为了保持我们CSS代码的清晰明了，我们也可以使用IE专有的条件语句。

下面是IE的条件语句参考：

针对所有版本的IE浏览器：

[CODE=html]

[/CODE]

针对所有非IE的浏览器：

[CODE=html]

[/CODE]

针对所有非IE的浏览器：

[CODE=html]

[/CODE]

针对IE7：

[CODE=html]

[/CODE]

针对IE6

[CODE=html]

[/CODE]

针对IE5

[CODE=html]
[/CODE]

针对IE5.5

[CODE=html]
[/CODE]

针对IE6和IE6以前版本：

[CODE=html] [/CODE]
或者：[CODE=html]
[/CODE]

IE7和以前版本：

[CODE=html] [/CODE]

或者：
[CODE=html][/CODE]

IE8和以前版本：

[CODE=html] [/CODE]

或者：
[CODE=html] [/CODE]

针对IE6和IE6以后的版本

[CODE=html] [/CODE]
或者：
[CODE=html] [/CODE]

针对IE7和IE7以后的版本

[CODE=html] [/CODE]
或者：
[CODE=html] [/CODE]

针对IE8和IE8以后的版本

[CODE=html] [/CODE]
或者：
[CODE=html] [/CODE]
在css-tricks上看到的一些信息，保存下来自己以后可以用。
另外也可以看之前的两篇文章：
[IE的条件语句]
[条件CSS的使用]
本文地址：http://www.xunzou.com/blog/post/608.html
原文地址：http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

继续阅读《IE的条件语句整理》的全文内容...

分类: 前端技术 | Tags: IE 条件语句 | 添加评论(0)

还没有相关文章，您来说两句？

视频播放缩略图增加播放按钮

xunzou@gmail.com (冰剑) — Mon, 08 Mar 2010 18:05:27 +0800

在hulu（美国知名的视频网站）上看到了这个视频缩略图增加一个play的效果，突然心血来潮，就也想做一个这样的效果。

思路：利用a标签，里面包含一个视频缩略图片，鼠标放上去之后，增加边框，图片上增加一个播放按钮，播放按钮用背景图来展示。
a标签里需要放置一个em,默认的时候隐藏，hover的时候em显示出来。

查看演示：http://www.xunzou.com/demo/thumbnail/
下图左边为默认显示效果，右边为鼠标放上去的效果。

[CODE=css]
.vp {width:600px;margin:0 auto;}
.vp a {width:145px;height:80px;display:block;background:#FFF;padding:4px;border:1px solid #333;overflow:hidden;position:relative;float:left;margin:30px 45px 0 0;}
.vp a img {width:145px;height:80px;}
.vp a em {display:none;width:33px;height:32px;background:url(btn-play-big.png) no-repeat;overflow:hidden;text-indent:-999px;}
.vp a:hover {padding:3px;border-width:2px;}
.vp a:hover em {display:block;position:absolute;top:29px;left:61px;z-index:2;cursor:pointer;}
[/CODE]
[CODE=html]

点此播放

[/CODE]
浏览器支持：
IE6及其以上、Firefox、safari、opera、chrome等

继续阅读《视频播放缩略图增加播放按钮》的全文内容...

分类: 前端技术 | Tags: CSS hover thumbnail | 添加评论(0)

Css content属性详解 (2010-7-6 18:54:17)
css属性之clip (2010-2-25 15:46:54)

[整理]日常所用的Firefox扩展

xunzou@gmail.com (冰剑) — Thu, 04 Mar 2010 18:26:31 +0800

　　Firefox是据称最好的浏览器，哈哈。好不好我今天不做评判，但是就它对web标准的支持来说，是比较不错的（当然Opera、Google的Chrome和Apple的Safari也不错）。他们都比IE在这方面好的多。
对于web前端开发工程来说，Firefox是一个不错的浏览器。我这一年已经放弃了IE，基本都用它，IE只在开发的时候用来测试，毕竟IE的市场份额是比较大的。　
Firefox浏览器的扩展给大家在日常的网站开发和浏览中提供了很大的帮助，今天整理了一下我经常用到的一些Firefox浏览器的扩展。

1、 Firebug

    相信做web开发的人对这个插件都不会陌生。（什么？你不知道这个插件？你OUT了吧。）
    Firebug 为你的 Firefox 集成了浏览网页的同时随手可得的丰富开发工具。你可以对任何网页的 CSS、HTML 和 JavaScript 进行实时编辑、调试和监控…
    Firebug在Firefox的下载地址：https://addons.mozilla.org/zh-CN/firefox/addon/1843
    Firebug官方地址：http://getfirebug.com/

2、 Web Developer
它在Firefox工具栏提供了一个菜单，有各种各样的工具可供选择使用。
Web Developer在Firefox的下载地址：https://addons.mozilla.org/zh-CN/firefox/addon/60

3、Yslow
Yslow是yahoo公司开发的一个对web页面进行分析并提出合理化建议的检测工具。Yslow是基于firebug的工具，所以想要装这个，需要先装上firebug。
yslow在Firefox的下载地址：https://addons.mozilla.org/zh-CN/firefox/addon/5369
Yahoo官方地址：http://developer.yahoo.com/yslow/

4、HTML Validator
HTML Validator是一个监测页面html代码错误的工具，包括错误的嵌套、错误的标签等。
HTML Validator在Firefox的下载地址：https://addons.mozilla.org/zh-CN/firefox/addon/249

5、Delicious Bookmarks
Delicious是yahoo的一个在线存储书签的网站，它能够方便的把你的书签上传到Delicious网站上。你能够在任何地方打开你的书签。
Delicious Bookmarks 是yahoo针对Delicious网站开发的基于Firefox的扩展，更加方便的携带你的书签。
Delicious Bookmarks在Firefox的下载地址：https://addons.mozilla.org/zh-CN/firefox/addon /3615
http://delicious.com/ (yahoo账户可直接登录)

6、Echofon
Echofon是一个可以发布twitter、查看tweets的一个插件；
Echofon在Firefox的下载地址：https://addons.mozilla.org/zh-CN/firefox/addon/5081

7、View Source Chart
View Source Chart 看名字大家应该都知道了，这个是查看源代码的。它查看的源代码是以布局/图形的方式把源代码显示出来的。也可以说是查看dom的工具吧！
View Source Chart在Firefox的下载地址：https://addons.mozilla.org/en-US/firefox/addon/655

继续阅读《[整理]日常所用的Firefox扩展》的全文内容...

分类: 前端技术 | Tags: firefox firebug yslow Web Developer html | 添加评论(1)

还没有相关文章，您来说两句？

css属性之clip

xunzou@gmail.com (冰剑) — Thu, 25 Feb 2010 15:46:54 +0800

今天说一下CSS的clip属性，这个属性可能不经常用，但是也是比较有用的属性之一。
我们先来看一下它的语法：

语法：clip : auto | rect ( number number number number )
取值： auto: 默认值。对象无剪切； rect ( number number number number )：依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用 auto 替换，即此边不剪切

以上引用自苏昱的：样式表中文手册。

clip它相当于一个遮罩，允许你遮住一个矩形元素的一部分。你必须为元素定义绝对定：absolute属性。制定一个相对于元素的top、right、bottom和left值。但是这4个值并不是和我们常用的border、margin、padding等的4个值的取值方法一样。具体看下图：

这里要注意的是right的值是从最左边开始算起的，bottom值是从最上面开始算起的。

下面我们来看两个例子：

1、图像裁剪的例子（点这里查看演示）：

用clip属性给图片一个遮罩，首先指定一个div元素position属性为：relative；然后在里面的img的css图像设置为：position:absolute;clip:rect(30px 165px 100px 30px);

用到的css如下：

[CODE=css]
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #000;
margin:40px 0;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
[/CODE]

2、调整图像大小的例子（点这里查看演示）：

原始图像为高200px，宽140px的图像，我现在要做一个它的缩略图，等比的话宽是100px，高为70px。但是既然是缩略图，我们可以设置为相等宽高的。这时我们可以用clip来裁剪图片多出的部分。

clip: rect(0 85px 70px 15px);详细解释：
总共宽度为100px，减去30px，则两边一边减去15px；
top=0，图像本来高度就是70，所以不用裁剪，top为0；
right=85，左边的15加上图像宽度70，即为这个值；
bottom=70，也不用裁剪，但是需从最上面取值；
left=15；
由于图片右边的15px已经裁剪掉，左边还有15px的空间，所有需要在图片上再添加left:-15px;去“取消”这个因裁剪留下的空白。

用到的css如下：

[CODE=css]
.gallery {
list-style: none;
margin: 0;
padding: 0;
}
.gallery li {
float: left;
margin: 0 10px 0 0;
position: relative;
width: 70px;
height: 70px;
border: solid 1px #000;
}
.gallery img {
width: 100px;
height: 70px;
position: absolute;
clip: rect(0 85px 70px 15px);
left: -15px;
}[/CODE]

这篇文章是我根据webdesignerwall网站上的一片文章，将其一部分翻译过来了。其实也不算是翻译，只是按照自己的理解给重新说明了一下。

本文地址：http://www.xunzou.com/blog/post/605.html

原文地址：http://www.webdesignerwall.com/tutorials/5-simple-but-useful-css-properties/

继续阅读《css属性之clip》的全文内容...

分类: 前端技术 | Tags: CSS clip | 添加评论(0)

Css content属性详解 (2010-7-6 18:54:17)
视频播放缩略图增加播放按钮 (2010-3-8 18:5:27)

冰剑'blog

Css content属性详解

相关文章:

css3多列布局模块研究

相关文章:

腾讯微博邀请码十三个（已经全部注册完毕）

用css3创建的3d效果的“带子”

看一下效果吧

主要用到了css3的阴影、圆角以及css实现的三角形的等效果

css3创建的3d

相关文章:

命题作文

CSS3属性选择符及其伪类

CSS3选择符语法概览：

1. 字串匹配的属性选择符：

a) E[att^="val"] 匹配具有att属性、且值以val开头的E元素

b) E[att$="val"]匹配具有att属性、且值以val结尾的E元素

c) E[att*="val"] 匹配具有att属性、且值中含有val的E元素

2. 结构性伪类

a) E:nth-child(n) 匹配父元素中的第n个子元素E

b) E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E

c) E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E

d) E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

e) E:last-child匹配父元素中最后一个E元素

f) E:first-of-type匹配同级兄弟元素中的第一个E元素

g) E:only-child匹配属于父元素中唯一子元素的E

h) E: only-of-type 匹配属于同类型中唯一兄弟元素的E

E:only-of-type

i) E:empty匹配没有任何子元素（包括text节点）的原色E

j) E:target匹配相关URL指向的E元素

k) E:not(s) 匹配所有不匹配简单选择符s的元素E

l) E ~ F匹配E元素之后的F元素

相关文章:

IE的条件语句整理

下面是IE的条件语句参考：

针对所有版本的IE浏览器：

针对所有非IE的浏览器：

针对所有非IE的浏览器：

针对IE7：

针对IE6

针对IE5

针对IE5.5

针对IE6和IE6以前版本：

IE7和以前版本：

IE8和以前版本：

针对IE6和IE6以后的版本

针对IE7和IE7以后的版本

针对IE8和IE8以后的版本

视频播放缩略图增加播放按钮

相关文章:

[整理]日常所用的Firefox扩展

css属性之clip

相关文章: