<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
*{margin:0;padding:0;}
/**************************** 边框基本属性 ***************************/
/* border-width设置边框粗细 */
/* border-color设置边框颜色 */
/* border-style设置边框样式,CSS3可为指定4个不同边框(TRBL) */
#border1{border:1px red;border-width:4px 1px;border-style:solid dotted dashed inset;width:200px;height:200px;}
#border2{clear:both;}
#border2>div{width:100px;height:100px;float:left;background:#ccc;border-color:red;margin:5px;}
#border2>div:nth-child(1){border:none;}
#border2>div:nth-child(2){border:hidden;}
#border2>div:nth-child(3){border:5px dotted;}
#border2>div:nth-child(4){border:5px dashed;}
#border2>div:nth-child(5){border:5px solid;}
#border2>div:nth-child(6){border:5px double;}
#border2>div:nth-child(7){border:5px groove;}
#border2>div:nth-child(8){border:5px ridge;}
#border2>div:nth-child(9){border:5px inset;}
#border2>div:nth-child(10){border:5px outset;}
/**************************** CSS3边框属性 ***************************/
/* border-TRBL-colors:多色边框，每种颜色1px，剩下宽度用最后一种颜色填满 */
#border3{border:15px solid red;-moz-border-top-colors:#111 #222 #333 #444 #555;width:100px;height:100px;}
/* border-image:<border-image-source> || <border-image-slice>[/<border-image-width>] || <border-image-repeat> */
#border4{border:50px double green;-moz-border-image:url(images/icon.png) 77 round stretch;width:500px;height:400px;}
#border5 a{border:6px solid green;-moz-border-image:url(images/UnSelected.png) 9 stretch;display:inline-block;padding: 5px 20px;text-decoration:none;}
#border5 a:hover{background:#ccc;}
#border6 ul{border-bottom:2px solid #ccc;margin:5px;}
#border6 ul li{border:6px solid green;border-width:6px 6px 0 6px;-moz-border-image:url(images/UnSelected.png) 9 stretch;display:inline-block;padding:5px;}
#border6 ul li:hover{background:#ccc;}
#border7 div{border:5px solid green;border-width:5px 5px 7px 6px;-moz-border-image:url(images/New_bg.png) 5 5 7 6 stretch;width:200px;height:100px;}
/* border-radius:none|<length>(1,4)[/<length>{1,4}]? */
/* Gecko内核(Firefox,Flock),-moz-border-radius-topleft:<length>/<length> */
/* Webkit内核(Chrome,Safari),-webkit-border-top-left-radius:<length>/<lenght> */
/* Presto和Trident内核浏览器(Opera,IE9+),border-top-left-radius:<length>/<lenght> */
/* border-radius:5px 0 0 0;左上圆角 */
#border8 div{width:250px;height:100px;display:inline-block;}
#border8>div:nth-child(1){border:10px solid orange;border-radius:10px;}
#border8>div:nth-child(2){border:10px solid orange;border-radius:10px 30px;}
#border8>div:nth-child(3){border:10px solid orange;border-radius:10px 50px 30px;}
#border8>div:nth-child(4){border:10px solid orange;border-radius:10px 20px 30px 40px;}
/* /前表示水平半径，后表示垂直半径 */
#border8>div:nth-child(5){border:10px solid orange;border-radius:60px 40px 30px 20px / 30px 20px 10px 5px;}
/* border-radius半径值小于等于border厚度元素内边框圆角效果就越小 */
#border8>div:nth-child(6){border:30px solid orange;border-radius:30px 0 0 0;}
#border8>div:nth-child(7){border:1px solid orange;border-radius:30px 0 0 0;}
/* 相邻边有不同宽度，角度会从宽的边平滑过渡到窄边，其中一条边可以为0，相邻角由大向小转 */
#border8>div:nth-child(8){border:30px solid orange;border-width:20px 5px 30px 60px;border-radius:100px;border-color:orange red green blue;}
/* 图片应用圆角边框在某些Webkit内核的浏览器不能裁截，可以将图片元素换位background背景图解决 */
#border9 img{border:5px solid red;border-radius:10px;}
#border9 div{border:5px solid red;border-radius:10px;background:url(images/welfare.png) no-repeat;width:142px;height:136px;}
#border10 table{border:5px solid red;border-radius:10px;width:500px;}
/* 表格应用圆角边框只在border-collapse为separate才有效 */
#border10 table:nth-child(1){border-collapse:collapse;}
#border10 table:nth-child(2){border-collapse:separate;}
/* border-radius属性可以用于制作一些特殊图形 */
#border11 div{border-radius:50%;width:100px;height:100px;background-color:orange;display:inline-block;}
#border11>div:nth-child(2){border-radius:50px 50px 0 0;height:50px;}
#border11>div:nth-child(3){border-radius:0 50px 50px 0;width:50px;height:100px;}
#border11>div:nth-child(4){border-radius:0 0 50px 50px;width:100px;height:50px;}
#border11>div:nth-child(5){border-radius:50px 0 0 50px;width:50px;height:100px;}
/* border-radius制作椭圆 */
#border12>div{background-color:orange;display:inline-block;}
#border12>div:nth-child(1){border-radius:100px/50px;width:100px;height:50px;}
#border12>div:nth-child(2){border-radius:50px/100px;width:50px;height:100px;}
</style>
</head>
<body>
<div id="border1"></div>
<div id="border2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br style="clear:both;" />
</div>
<div id="border3"></div>
<div id="border4"></div>
<div id="border5">
<a href="javascript:void(0);">Click Me</a>
<a href="javascript:void(0);">CSS3 Border Image Button</a>
</div>
<div id="border6">
<ul>
<li>Home</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<div id="border7">
<div>小框框 *0*</div>
</div>
<div id="border8">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="border9">
<img src="images/welfare.png" width="142" height="136" />
<div></div>
</div>
<div id="border10">
<table>
<tr>
<td>1</td>
<td>66</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>66</td>
</tr>
</table>
</div>
<div id="border11">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="border12">
<div></div>
<div></div>
</div>
</body>
</html>边框
最新推荐文章于 2022-09-21 19:12:53 发布
3045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
