那个加号怎么画的啊

个回答

光被四表

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;
}

2
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>

1

記憶纯白: 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>