html中用css定義div的邊框樣式
阿新 • • 發佈：2018-12-15
我們都知道html中div定義的是一個塊，有時候我們需要給這個塊增加一些邊框來達到我們所需要的要求。
1.如何定義邊框
如下所示我用css定義了這個邊框的屬性
<style>
.c{
width:100px;
height:100px;
border-width: 1px;
border-style: solid;
border-color: black;
}
</style>
<body>
<div class="c"></div>
</body>
這是效果圖
邊框的寬度用border-width:設定
邊框的型別用border-style:設定
邊框虛線樣式：dashed 邊框實現樣式：solid
2.有時候我們會用到這個div塊的某個邊框而不是四個邊框我們該怎麼設定呢
上面提到了，邊框的寬度用border-width設定，那我們把他的某個邊的寬度設為0，不就達到我們的目的了嘛，例如：
<style> .c{ width:100px; height:100px; border-width: 0px 0px 1px 0px ; border-style: solid; border-color: black; } </style> <body> <div class="c"></div> </body>
我把border-width設為了0px 0px 1px 0px ;
注：1.這代表了div邊框的四個邊，順序為上右下左，按順時針 2.如果寫兩個值，第一個代表上下邊框的值，第二個則代表左右邊框的值 3.寫三個值的話，第一個代表上邊框，第二個代表左右邊框，第三個代表下邊框