border的幾個用法。
阿新 • • 發佈:2019-01-29
1.三等分
2.傳統的十字新增
3.定義塊狀元素的高度,邊界
4.三角形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; /*設定出事邊距為0*/ } html,body{ width: 100%; height: 100%; } .con{ width: 100px; height: 20px; border-top:60px double;/*高度為20,但是設定60px double 進行三等分,形成20px,20px的空格。*/ border-bottom: 20px solid blue; } /*border-hover利用border的預設color屬性來設定邊框,例如傳統的十字新增*/ .add{ width: 100px; height: 100px; color:#ccc; transition: color .25s;/*演示250毫秒*/ border:1px solid; position: relative; top:0px; left: 50%; }/*做出一個塊狀元素,正方形*/ .add:before{ content: ''; width: 60px; border-top: 10px solid;/*利用border邊框來畫十字*/ position: absolute;/*使其居中,利用position的absolute絕對位置進行判斷*/ top:45px;/*向下偏移45畫素,加上自身10px下方45px,正好100px*/ left:20px;/*同理*/ } .add:after{ content: ''; height: 60px;/*高度為60px*/ border-left: 10px solid; position:absolute; top: 20px; left: 45px; } /*點選變色*/ .add:hover{ color: blue; } .bkp{ height: 400px;/*定義塊狀元素的高度,邊界*/ width: 600px; background: url(../img/mooc2.png) no-repeat; border: 1px solid; /*沒有利用position的absolute絕對位置,加上top,left來居中等操作 而是利用background-position的預設屬性來確定*/ background-position: 40px 40px;/*預設保持距離左邊邊框50畫素*/ } .bkright{ height: 400px;/*定義塊狀元素的高度,邊界*/ width: 400px; background: url(../img/mooc2.png) no-repeat; /*沒有利用position的absolute絕對位置,加上top,left來居中等操作 而是利用background-position的預設屬性來確定*/ border-right: 40px solid transparent; position: absolute; background-position: 100% 40px;/*預設保持距離左邊邊框50畫素*/ position: absolute; } .triangle{ width: 100px; height: 100px; border:100px solid; border-color: red orange blue chartreuse; margin-left: auto; margin-right: auto; } .triangle2{ width: 0px; height: 0px; border:50px solid; border-color: red red transparent transparent; margin-left: auto; margin-right: auto; } .triangle3{ width: 300px; border: 100px solid; border-color: transparent transparent red; } .123{ height: 30px;/*定義塊狀元素的高度,邊界*/ width: 30px; background: url(../img/mooc2.png) no-repeat; border: 1px solid; } /*增加複選框面積*/ .checkbox{ border:2px solid transparent;/*border透明來增加點選區域*/ box-shadow: insert 0 1px,insert 1px 0,insert -1px 0,insert 0 -1px; background-color: #fff; background-clip: content-box; color:#d0d0d5; } </style> </head> <body> <div class="con"></div> <div class="add"></div> <div class="bkp"></div> <div class="bkright"></div> <div class="triangle"> </div> <div class="triangle2"> </div> <div class="triangle3"> </div> </body> </html>