Css效果之好看的邊框顏色大全

Css效果之好看的邊框顏色大全

今天分享一些好看的邊框顏色,需要的可以直接拿走使用。

效果圖:


html代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>分享JavaScript-sharejs.com</title>
<style tpe="text/css">
body{
 background-color:#FFF;
}
div{
 margin:10px 0px;
}
.d1{
 border:1px solid #96C2F1;
 background-color:#EFF7FF;
 width:300px;
 height:100px;
}
.d2{
 border:1px solid #9BDF70;
 background-color:#F0FBEB;
 width:300px;
 height:100px;
}
.d3{
 border:1px solid #92B0DD;
 background-color:#FFFFFF;
 width:300px;
 height:100px;
}
.d4{
 border:1px solid #BBE1F1;
 background-color:#EEFAFF;
 width:300px;
 height:100px;
}
.d5{
 border:1px solid #CCEFF5;
 background-color:#FAFCFD;
 width:300px;
 height:100px;
}
.d6{
 border:1px solid #FFCC00;
 background-color:#FFFFF7;
 width:300px;
 height:100px;
}
.d7{
 border:1px solid #A9C9E2;
 background-color:#E8F5FE;
 width:300px;
 height:100px;
}
.d8{
 border:1px solid #E3E197;
 background-color:#FFFFDD;
 width:300px;
 height:100px;
}
.d9{
 border:1px solid #ADCD3C;
 background-color:#F2FDDB;
 width:300px;
 height:100px;
}
.d10{
 border:1px solid #F8B3D0;
 background-color:#FFF5FA;
 width:300px;
 height:100px;
}
.d11{
 border:1px solid #D3D3D3;
 background-color:#F7F7F7;
 width:300px;
 height:100px;
}
.d12{
 border:1px solid #BFD1EB;
 background-color:#F3FAFF;
 width:300px;
 height:100px;
}
.d13{
 border:1px solid #FFDD99;
 background-color:#FFF9ED;
 width:300px;
 height:100px;
}
.d14{
 border:1px solid #CACAFF;
 background-color:#F7F7FF;
 width:300px;
 height:100px;
}
.d15{
 border:1px solid #A5B6C8;
 background-color:#EEF3F7;
 width:300px;
 height:100px;
}
.d16{
 border:1px solid #CEE3E9;
 background-color:#F1F7F9;
 width:300px;
 height:100px;
}
.d17{
 border:1px solid #CAE3FF;
 background-color:#F4F9FF;
 width:300px;
 height:100px;
}
.d18{
 border:1px solid #C9D9EE;
 background-color:#ECF8FF;
 width:300px;
 height:100px;
}
.d19{
 border:1px solid #5C9CC0;
 background-color:#F2FAFF;
 width:300px;
 height:100px;
}
</style>
</head>
<body>
<div class="d1"></div>
 <div class="d2"></div>
 <div class="d3"></div>
 <div class="d4"></div> 
 <div class="d5"></div> 
 <div class="d6"></div> 
 <div class="d7"></div> 
 <div class="d8"></div> 
 <div class="d9"></div> 
 <div class="d10"></div> 
 <div class="d11"></div> 
 <div class="d12"></div> 
 <div class="d13"></div> 
 <div class="d14"></div> 
 <div class="d15"></div> 
 <div class="d16"></div> 
 <div class="d17"></div> 
 <div class="d18"></div> 
 <div class="d19"></div> 
<br><br>
<div align="center">
獲取更多JavaScript代碼,請登錄JavaScript分享網 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
</div>
</body>
</html>


發佈了56 篇原創文章 · 獲贊 20 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章