HTML中div邊框設置方法

更新時間：2022-08-18 10:30:04 來源：動力節點瀏覽1347次

在HTML教程中，會講的很多知識，那么，在HTML中div邊框該如何設置？動力節點小編來告訴大家。在HTML前端斥地中，有數次會對配置邊框。這里給DIV加一個邊框方式教程，實現div邊框款式。經由CSS border花樣屬性實現加邊框。如下是各類給DIV加分歧邊框實例與才具教程、html代碼。

div加四邊加邊框

1.用到css單詞與值

border:1px solid #F00

設置對象邊框為紅色邊框

2.div殘破小實例實例代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>www.CSS5.com.cn</title> 
<style> 
.a-4{ border:1px solid #F00} 
</style> 
</head> 
<body> 
<div class="a-4">四邊為血色</div> 
</body> 
</html>

div上邊加邊框

1.運用單詞和值

border-top:1px solid #F00

2.完整實例代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>www.CSS5.com.cn</title> 
<style> 
.a-top{ border-top:1px solid #F00} 
</style> 
</head> 
<body> 
<div class="a-top">只配置div上邊框</div> 
</body> 
</html>

div下邊加邊框

1.應用單詞和值

border-bottom:1px solid #000

2.殘破實例代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>www.CSS5.com.cn</title> 
<style> 
.a-bottom{ border-bottom:1px solid #000} 
</style> 
</head> 
<body> 
<div class="a-bottom">只設置div下邊框</div> 
</body> 
</html>

div左邊加邊框

1.應用單詞與值

border-left:1px solid #000

2.殘破源代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>www.CSS5.com.cn</title> 
<style> 
.a-left{ border-left:1px solid #000} 
</style> 
</head> 
<body> 
<div class="a-left">只設置div 左邊框</div> 
</body> 
</html>

div右邊加邊框

1.DIV的右側框運用單詞與值

border-right:1px dashed #F00

2.代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>www.CSS5.com.cn</title> 
<style> 
.a-right{border-right:3px dashed #F00} 
</style> 
</head> 
<body> 
<div class="a-right">只配置div右側邊框</div> 
</body> 
</html>

div三邊加邊框

1.技能花樣先設置border值，即設置對象4邊均有邊框，那條div邊不需要設置裝備擺設邊框，就對其再配置邊框為0的值。

2.殘缺HTML源代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>www.CSS5.com.cn</title> 
<style> 
.a-san{border:3px solid #F00; border-bottom:0} 
</style> 
</head> 
<body> 
<div class="a-san">三邊有邊框，其它一邊沒有邊框</div> 
</body> 
</html>

配置下邊框沒有邊框，其它三邊設置邊框。——下邊框不設置裝備擺設邊框。