1. 程式人生 > 其它 >盒子模型(框模型)——邊框

盒子模型(框模型)——邊框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>盒子模型(框模型)——邊框</title>
        <style type="text/css">
        /* 
            邊框(border)
                不指定寬度,邊框也會有一個預設寬度,一般是3px
                不指定顏色會預設使用字型顏色
                border-style的預設值是none
                邊框簡寫屬性border,通過該屬性同時設定四個方向邊框的寬度,顏色,樣式,並且沒有順序要求
         
*/ .box{ width: 100px; height: 100px; /* border-style: solid; */ /* border是邊框,通過該屬性同時設定四個方向邊框的寬度,顏色,樣式,並且沒有順序要求 */ /* border:1px red solid; */ /* border還有以下四個 border-top border-right border-bottom border-left
*/ border-top: 2px solid blue; border-right:3px double red; border-bottom: 4px dotted yellow; border-left: 5px dashed #00FFFF; } </style> </head> <body> <div class="box"></div>
</body> </html>