?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<title>cssborder</title> ?6 ????<style> ?7 ????????*{ ?8 ????????????margin: 0; ?9 ????????????padding:0; 10 ????????} 11 ????????.test1{ 12 ????????????margin:20px; 13 ????????????width: 100px; 14 ????????????height: 100px; 15 ????????????border: thin solid #666; 16 ????????} 17 ????????.test2{ 18 ????????????margin:20px; 19 ????????????width: 100px; 20 ????????????height: 100px; 21 ????????????border: medium solid #666; 22 ????????} 23 ????????.test3{ 24 ????????????margin:20px; 25 ????????????width: 100px; 26 ????????????height: 100px; 27 ????????????border: thick solid #666; 28 ????????} 29 ????????.test4{ 30 ????????????margin:20px; 31 ????????????width: 100px; 32 ????????????height: 100px; 33 ????????????border: 3px dashed #666; 34 ????????} 35 ????????.test5{ 36 ????????????margin:20px; 37 ????????????width: 100px; 38 ????????????height: 100px; 39 ????????????border: 3px dotted #666; 40 ????????} 41 ????????.test6{ 42 ????????????margin:20px; 43 ????????????width: 100px; 44 ????????????height: 100px; 45 ????????????border: 3px double #666;/*双线风格至少要三3px才能出效果*/ 46 ????????} 47 ????????.more{ 48 ????????????width: 120px; 49 ????????????height: 20px; 50 ????????????border-top:60px double;/*60px的双线边框，边框的空白分别是20px,20px,20px*/ 51 ????????????border-bottom: 20px solid; 52 ????????????margin:60px; 53 ????????????cursor: pointer; 54 ????????} 55 ????????/*border-color的默认颜色是color*/ 56 ????????.add{ 57 ????????????position: relative; 58 ????????????height: 100px; 59 ????????????width: 100px; 60 ????????????margin:60px; 61 ????????????color: #ccc; 62 ????????????transition: color .25s; 63 ????????????border:1px solid; 64 ????????????cursor: pointer; 65 ????????} 66 ????????.add:before{ 67 ????????????content: ""; 68 ????????????display: block; 69 ????????????width: 60px; 70 ????????????height: 10px; 71 ????????????border-color: #ccc; 72 ????????????position: absolute; 73 ????????????top:50%; 74 ????????????left: 50%; 75 ????????????margin:-5px 0 0 -30px; 76 ????????????border-top:10px solid; 77 ????????} 78 ????????.add:after{ 79 ????????????content: ""; 80 ????????????display: block; 81 ????????????height: 60px; 82 ????????????width: 10px; 83 ????????????border-color:#ccc; 84 ????????????border-left:10px solid; 85 ????????????position: absolute; 86 ????????????top:50%; 87 ????????????left: 50%; 88 ????????????margin:-30px 0 0 -5px; 89 ????????} 90 ????????.add:hover{ 91 ????????????color:#06c; 92 ????????} 93 ????????.test7{ 94 ????????????width: 0px; 95 ????????????height: 0px; 96 ????????????margin:60px; 97 ????????????border:50px solid; 98 ????????????border-color: red green blue orange; 99 ????????}100 ????????.test8{101 ????????????width: 50px;102 ????????????height: 50px;103 ????????????margin:60px;104 ????????????border:50px solid;105 ????????????border-color: red green blue orange;106 ????????}107 ????????.test9{108 ????????????width: 0px;109 ????????????height: 0px;110 ????????????margin:60px;111 ????????????border:50px solid;112 ????????????border-color: ?green green transparent transparent;113 ????????}114 ????????/*115 ????????????background-positiond定位元素的局限：只能在相对左上角数值定位，不能相对右下角。116 ????????????将图片相对于右边定位：117 ????????????border-right:50px solid transparent;118 ????????????background-position:100% 40px;119 120 121 ????????????100%右侧定位不见算border区域。122 ????????????123 ????????*/124 125 ????????/*border透明边框增加响应区域的大小*/126 ????????.checkbox{127 ????????????width: 16px;128 ????????????height: 16px;/*如果是这样的话，点击区域太小，用户体验不好*/129 ????????????border:2px solid transparent;/*设置2px的透明边框，整个点击区域的大小变为20px*/130 ????????????box-shadow: inset 0 1px,inset 1px 0,inset -1px 0,inset 0 -1px;131 ????????????background-color:#fff;132 ????????????background-clip: content-box;133 ????????????color: #d0d0d5;134 ????????????margin:60px;135 ????????}136 137 ????????/*138 ????????????border实现等高布局。139 ????????????局限：不支持百分比。140 ????????*/141 142 ????????.box{143 ????????????margin:60px;144 ????????????border-left:300px solid #222;145 ????????????color: #ccc;146 ????????}147 ????????.left{148 ????????????width:300px;149 ????????????margin-left: -300px;150 ????????????float: left;151 ????????}152 153 ????</style>154 </head>155 <body>156 ????<div class="test1">thin:1px</div>157 ????<div class="test2">medium:3px</div>158 ????<div class="test3">thick:5px</div>159 ????<div class="test4">style:dashed</div>160 ????<div class="test5">style:dotted</div>161 ????<div class="test6">style:double</div>162 ????<div class="more">点击显示更多</div>163 ????<div class="add"></div>164 ????<div class="test7"></div>165 ????<div class="test8"></div>166 ????<div class="test9"></div>167 ????<div class="checkbox"></div>168 169 ????<!--170 ????????border在布局方面的应用171 ????-->172 ????<div class="box">173 ????????<nav class="left">174 ????????????<h3>导航1</h3>175 ????????????<h3>导航1</h3>176 ????????????<h3>导航1</h3>177 ????????</nav>178 ????????<section>179 ????????????<div class="module">模块1</div>180 ????????????<div class="module">模块1</div>181 ????????????<div class="module">模块1</div>182 ????????????<div class="module">模块1</div>183 ????????</section>184 ????</div>185 </body>186 </html>CSS深入理解之border_imooc张
原文地址：http://www.cnblogs.com/LinSL/p/7560428.html