那个加号怎么画的啊
qq_刺猬先生_03549865
2016-12-29 15:40
那个加号怎么画的啊
3回答
-
- 光被四表
- 2016-12-29 16:27:26
<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;
}
-
- marioma
- 2017-02-07 21:40:19
<!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 16:32:07
<!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>
CSS深入理解之border
56800 学习 · 73 问题
相似问题