css 邊框添加四個角的實現(xiàn)代碼
發(fā)布時間：2021-10-14 16:15:02 作者：涼面好好吃 
我要評論
我要評論這篇文章主要介紹了css 邊框添加四個角的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1、html
<div class="loginbody">
<div class="border_corner border_corner_left_top"></div>
<div class="border_corner border_corner_right_top"></div>
<div class="border_corner border_corner_left_bottom"></div>
<div class="border_corner border_corner_right_bottom"></div>
<--other……………………-->
</div>
2、css
.loginbody{
border: 1px solid #21a7e1;
box-shadow: 5px 5px 10px 10px rgba(24,68,124,0.4);
padding-top:20px;
border-radius: 6px;
position: relative;
}
/*四個角框*/
.border_corner{
z-index: 2500;
position: absolute;
width: 19px;
height: 19px;
background: rgba(0,0,0,0);
border: 4px solid #1fa5f1;
}
.border_corner_left_top{
top: -2px;
left: -2px;
border-right: none;
border-bottom: none;
border-top-left-radius: 6px;
}
.border_corner_right_top{
top: -2px;
right: -2px;
border-left: none;
border-bottom: none;
border-top-right-radius: 6px;
}
.border_corner_left_bottom{
bottom: -2px;
left: -2px;
border-right: none;
border-top: none;
border-bottom-left-radius: 6px;
}
.border_corner_right_bottom{
bottom: -2px;
right: -2px;
border-left: none;
border-top: none;
border-bottom-right-radius: 6px;
}
到此這篇關于css 邊框添加四個角效果的文章就介紹到這了,更多相關css 邊框添加四個角內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
通過CSS邊框?qū)崿F(xiàn)三角形和箭頭的實例代碼
這篇文章主要介紹了通過CSS邊框?qū)崿F(xiàn)三角形和箭頭的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-15
這篇文章主要介紹了css效果之邊框內(nèi)圓角的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2019-06-19
CSS3徑向漸變radial-gradient實現(xiàn)波浪邊框和內(nèi)倒角的方法
這篇文章主要介紹了CSS3徑向漸變radial-gradient實現(xiàn)波浪邊框和內(nèi)倒角的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友2019-02-19- 這篇文章主要介紹了CSS圓角邊框制作指南與實例,這里突出講解了以純代碼實現(xiàn)的小圓角 來消滅鋸齒的方法,需要的朋友可以參考下2016-03-10
div+css用邊框?qū)崿F(xiàn)圓角矩形(多樣式)
css圓角卷起了一陣風波，只用css來做圓角矩形的技術很早就有了,但是在網(wǎng)頁的設計過程中,我們通常用圖片實現(xiàn)圓角矩形效果。現(xiàn)在網(wǎng)上很多關于無圖片實現(xiàn)css圓角矩形的方法,雖2013-03-25
