1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>cssborde ...
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张
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。