那个加号怎么画的啊
那个加号怎么画的啊
qq_刺猬先生_03549865
2016-12-29
3 回答
<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;
}
<!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>
<!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>举报
0/150
提交
取消
