border,color,实现一个上传按钮

作者：admin 时间：2017年11月07日分类：前端笔记字数：1061 阅读：1728

css按钮border

请输入图片描述
通过css的border,color来实现一个上传按钮

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>border,color,实现一个上传按钮</title>
<style type="text/css">
.add{
    display: block;
    width: 48px;
    height: 48px;
    position: relative;
    color: #ccc;
    transition: color .25s;
    border: 1px solid;
    border-radius: 4px;
}
.add:before {
    content: "";
    width: 36px;
    position: absolute;
    left: 6px;
    top: 23px;
    border-top:2px solid;
}
.add:after {
    content: "";
    height: 36px;
    position: absolute;;
    left: 23px;
    top: 6px;
    border-left: 2px solid;
}
.add:hover {
    color: #067;
}
</style>
</head>
<body>
 
<a class="add" href="javascript:;">   </a>
</body>
</html>