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

求教，十字架是通過(guò) 偽類(lèi)after 樣式里面哪些樣子生成的？

求教，十字架這二條邊是怎么通過(guò)偽類(lèi)after里面的樣式生成的？content=""，那后面設(shè)置border-top樣式，這個(gè)樣式怎么會(huì)生成出一條水平邊出來(lái)？如果border-top是box對(duì)象的上邊，那為什么box本身的四邊不受這個(gè)border-top的影響而發(fā)生變化？after和before里面的border-top和border-left畫(huà)出十字架的原理是什么？跪求高手解答一下！謝謝

慕九州5109875

2018-07-12

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

關(guān)注問(wèn)題我要回答

1911

操作

收起

2 回答

小花丶
2018-12-13

<!DOCTYPE HTML>

<html>

<body>

<style>

.add{

????position:relative;

????width:50px;

????height:50px;

????border:1px solid;

????color:#369;

}

.add:hover{

????cursor:pointer;

????color:#ff0;

}

.add::before,

.add::after

{

????position:absolute;

????content:'';

????left:50%;

????top:50%;

????border-top:4px solid;

????border-radius:2px;

}

.add::before{

????width:30px;

????border-top:4px solid;

????transform:translate(-50%,-2px);

}

.add::after{

????height:30px;

????border-left:4px solid;

????transform:translate(-2px,-50%);

}

</style>

</body>

</html>

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

一如忘詞

有一行代碼好像多余了，感覺(jué)沒(méi)啥用，就是那個(gè)top下面的

2019-12-02 回復(fù) 有任何疑惑可以回復(fù)我~

#2

假蛙工程師

可以用，但是很丑

2024-05-19 回復(fù) 有任何疑惑可以回復(fù)我~

xing_org1
2018-07-23

<div?class="add">
</div>

.add{
??position:?relative;
??width:?120px;
??height:?120px;
??margin:?200px;
??color:?#ccc;
??border:?1px?solid;
??transition:?color?.5s;
}
.add::before,
.add::after{
??content:?"";
??width:?60px;
??height:?60px;
??position:?absolute;
??left:?50%;
??top:?50%;
}
.add::before{
??margin-top:?-5px;
??margin-left:?-30px;
??border-top:?10px?solid;
}
.add::after{
??margin-top:?-30px;
??margin-left:?-5px;
??border-left:?10px?solid;
}
.add:hover{
??color:?red;
??cursor:?pointer;
}

你看看這樣的可以不