你的位置:首页 > 软件开发 > 网页设计 > CSS深入理解之border_imooc张

CSS深入理解之border_imooc张

发布时间:2017-09-20 12:00:25
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深入理解之border_imooc张

CSS深入理解之border_imooc张

原标题:CSS深入理解之border_imooc张

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。