那個(gè)加號(hào)怎么畫(huà)的啊
那個(gè)加號(hào)怎么畫(huà)的啊
qq_刺猬先生_03549865
2016-12-29
3 回答
舉報(bào)
0/150
提交
取消
2016-12-29
<div class="add"></div>
.add{
? width:100px;
? height:100px;
? border:1px solid;
? color:#ccc;
? transition:color 0.25s;
? position:relative;
}
.add:before{
content:" ";
? ? ? display:block;
? width:60px;
? height:10px;
? border-color:#ccc;
? border-top:10px solid;
? position:absolute;
? top:50%;
? left:50%;
? margin: -5px 0 0 -30px ;
}
.add:after{
? content:" ";
? display:block;
? width:10px;
?height:60px;
? border-color:#ccc;
? border-left:10px solid;
? position:absolute;
? top:50%;
? left:50%;
? margin:-30px 0 0 -5px;
}
.add:hover{
? color:#f6c;
}
2017-02-07
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>Title</title>
?<style>
.add{
? ? ?display: block;
width:100px;
height:100px;
border:1px solid;
color:#ccc;
transition:color 0.25s;
position:relative;
}
? ?.add:before{
? ? ?content:" ";
width:60px;
border-top:10px solid;
position:absolute;
top:50%;
left:50%;
margin: -5px 0 0 -30px ;
}
? ?.add:after{
? ? ?content:" ";
height:60px;
border-left:10px solid;
position:absolute;
top:50%;
left:50%;
margin:-30px 0 0 -5px;
}
? ?.add:hover{
? ? ?color:#f6c;
}
?</style>
</head>
<body>
<a href="javascript:" class="add"></a>
</body>
</html>
2016-12-29
<!doctype?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>Document</title> ????<style?type="text/css"> ????.add{ ????????display:?block; ????????width:?100px; ????????height:?100px; ????????color:?#ccc; ????????border:1px?solid; ????????position:?relative; ????} ????.add:before{ ????????content:?''; ????????width:?60px; ????????border-top:10px?solid; ????????position:?absolute; ????????top:45px; ????????left:?20px; ????} ????.add:after{ ????????content:?''; ????????height:?60px; ????????border-left:10px?solid; ????????position:?absolute; ????????top:20px; ????????left:?45px; ????} ????.add:hover{ ????????color:#06c; ????} ????</style> </head> <body> ????<a?href="javascript:;"></a> </body> </html>