CSS border邊框一半或者部分可見(jiàn)的實(shí)現(xiàn)代碼
發(fā)布時(shí)間：2020-12-07 15:53:36 作者：暴雪蝸牛 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS border邊框一半或者部分可見(jiàn)的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1.使用偽類(lèi)，讓Border邊框顯示一半
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用偽類(lèi)，在元素前或后插入內(nèi)容</title>
<style>
div {
position: relative;
width: 300px;
height: 50px;
background-color: #bbb;
padding: 4px
}
div:before {
content: "";
position: absolute;
left: 0;
top: -2px;
width: 50%;
height: 2px;
background-color: red
}
</style>
<div>請(qǐng)看這個(gè)div的“上邊框”是只有一半的</div>
</body>
</html>
2.使用絕對(duì)定位，增加邊框盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用position定位,邊框顯示一半</title>
<style>
#holder {
height: 50px;
width: 300px;
position: relative;
margin: 10px;
background-color: #eee;
}
#mask {
position: absolute;
top: -1px;
left: 1px;
width: 50%;
height: 1px;
background-color: orchid;
}
</style>
<div id="holder">
請(qǐng)看這個(gè)div的“上邊框”是只有一半的
<div id="mask"></div>
</div>
</body>
</html>
到此這篇關(guān)于CSS border邊框一半或者部分可見(jiàn)的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)CSS border邊框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這是一款由腳本之家翻譯自國(guó)外網(wǎng)站的在線CSS工具，可在線調(diào)整生成樣式的邊框圓角效果，以及邊框的寬度、顏色、樣式等屬性，還可實(shí)時(shí)預(yù)覽生成的CSS代碼，并支持一鍵復(fù)制代碼2017-09-19
- 在CSS3里引入的很多新特征中，這篇文章主要介紹了css3圖片邊框border-image的用法,具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-30
使用CSS的border屬性構(gòu)建變形邊框的方法總結(jié)
border是最常用的用來(lái)制作各種各樣div邊框的CSS屬性,這里我們整理了使用CSS的border屬性構(gòu)建變形邊框的方法總結(jié),最主要的還是基于三角形的一些圖形變換:2016-06-23- 用CSS3的border-radius屬性來(lái)制作圓角邊框相當(dāng)順手,然而瀏覽器的兼容問(wèn)題并不是太好處理,這里我們就來(lái)總結(jié)一下border-radius以外的CSS圓角邊框制作方法.2016-06-02
- Border-color是專(zhuān)為邊框的多顏色而準(zhǔn)備的屬性，接下來(lái)為大家介紹一下CSS3之邊框多顏色Border-color的使用，喜歡的朋友不要錯(cuò)過(guò)2013-10-11