                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /CSS深入理解之border

那個加號怎么畫的啊

03:26

qq_刺猬先生_03549865

2016-12-29

源自：CSS深入理解之border 3-1

關注問題我要回答

3609

操作

收起

3 回答

光被四表回答被采納 +3 積分
2016-12-29

.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 回復有任何疑惑可以回復我~

收起回答

#1

qq_刺猬先生_03549865 提問者

非常感謝！

2016-12-29 回復有任何疑惑可以回復我~

#2

Levier007

請問方便注釋下代碼嗎看不太懂 content："" 代表啥？

2017-05-11 回復有任何疑惑可以回復我~

#3

weixin_慕數(shù)據(jù)3255160

我覺得是空字符display成塊元素這樣好排版

2019-08-08 回復有任何疑惑可以回復我~

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

1 回復有任何疑惑可以回復我~

收起回答

記憶純白
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>

2 回復有任何疑惑可以回復我~

收起回答