多色边框 colored border

		border:10px solid #CCC;
		-moz-border-top-colors:#F80 #F90 #FA0 #FB0 #FC0;
		-moz-border-right-colors:#F80 #F90 #FA0 #FB0 #FC0;
		-moz-border-bottom-colors:#F80 #F90 #FA0 #FB0 #FC0;
		-moz-border-left-colors:#F80 #F90 #FA0 #FB0 #FC0;
		padding:5px;
Mozilla/Firefox users should see a nicely fading red border on this box…

图像填充边框 border-image

round

		border:6px;
		-webkit-border-image: url(img/border.gif) 6 6 6 6 round round;
		padding:10px;
new border feature of CSS3 that works in Safari 3 is the property border-image

stretch

		border:6px;
		-webkit-border-image: url(img/border.gif) 6 6 6 6 stretch stretch;
		padding:10px;
new border feature of CSS3 that works in Safari 3 is the property border-image

圆角边框 border-radius

		border:2px solid #CCC;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		padding:5px;
Mozilla/Firefox and Safari 3 users should see a nicely rounded box

left upper corner

		border:2px solid #CCC;
		-moz-border-radius-topleft: 10px;
		-webkit-border-top-left-radius: 10px;
		padding:5px;
Mozilla/Firefox and Safari 3 users should see a nicely rounded box

right upper corner

		border:2px solid #CCC;
		-moz-border-radius-topright: 10px;
		-webkit-border-top-right-radius: 10px;
		padding:5px;
Mozilla/Firefox and Safari 3 users should see a nicely rounded box

left lower corner

		border:2px solid #CCC;
		-moz-border-radius-bottomleft: 10px;
		-webkit-border-bottom-left-radius: 10px;
		padding:5px;
Mozilla/Firefox and Safari 3 users should see a nicely rounded box

right lower corner

		border:2px solid #CCC;
		-moz-border-radius-bottomright: 10px;
		-webkit-border-bottom-right-radius: 10px;
		padding:5px;
Mozilla/Firefox and Safari 3 users should see a nicely rounded box...

投影 box-shadow

		-webkit-box-shadow:10px 10px 10px #888;
		padding:5px;
Safari 3 users should see a nice grey fading shadow under this box...

rounded corners

		-webkit-box-shadow:10px 10px 10px #888;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding:5px;
Safari 3 users should see a nice grey fading shadow under this box

背景大小 background-size

		height:200px;
		background:url(img/fruit.jpg);
		color:#F03;
		-o-background-size: 200px 150px;
		-webkit-background-size: 200px 150px;
		-khtml-background-size: 200px 150px;
Opera 9.5, Safari 3 and Konqueror users should see the sized bacground image...

多重背景 Multiple backgrounds

		height:300px;
		width:600px;
		color:#F03;
		background:url(img/bg_1.jpg) left top no-repeat,
		url(img/bg_2.jpg) left bottom no-repeat,
		url(img/bg_3.jpg) right top no-repeat,
		url(img/bg_4.jpg) right bottom no-repeat;
WebKit and KHTML (Konqueror) users should see multiple backgrounds...

文本投影 text-shadow

		color:#FFF;
		text-shadow:2px 2px 2px #000;
Opera 9.5 and Safari users should see black text-shadow...

文本溢出 text-overflow

		width:200px;
		border:1px solid #CCC;
		padding:5px;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
Welcome to wondger's blog,www.wondger.com

自动换行 word-wrap

		width:200px;
		border:1px solid #CCC;
		padding:5px;
		word-wrap:break-word;
welcome!wondgercomwwwwondgercomwwwwondgercomwwwwondgercom

变化尺寸 resize

		width: 200px;
		height: 100px;
		padding:10px;
		border: 1px solid #CCC;
		resize: both;
		overflow:auto;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

外边框 outline

		width:400px;
		height:150px;
		border:1px solid #CCC;
		outline:2px solid #F03;
		outline-offset:15px;
This div has both a gray border, and a red outline, with an offset of 15 pixels

属性选择器 Attribute selectors

        CSS code:
		div[id^=my]{ color:#C00;}
		div[id$=http]{ color:#00F;}
		div[id*=other]{ color:#000; text-decoration:underline;}
        HTML code:
        <div id="my_url"> wondger's blog: www.wondger.com </div>
        <div id="url_http"> 蓝色理想: www.blueidea.com </div>
        <div id="my_other_url"> web实验室: www.web-lab.cn </div>
wondger's blog:www.wondger.com
蓝色理想:www.blueidea.com
web实验室:www.web-lab.cn