css樣式表有一個邊框的語法 border,可以讓美工人員省去時間不用設計框線,還可以有多種樣式可選,如實線、虛線、點線、雙線等等。
語法如下:

border-style: dotted; /* dashed, double, groove, ridge, inset, outset */  

那個框線樣式點線(dotted)我最常用,但是也最讓人頭疼,因為點與點的距離太密了,看起來就不那麼舒服,所以我們要用一種方式取代它。

我們用 :before , :after 這個方式做,但是只能出現在上方或是下方,左右就對不起了。

接著用鍵盤上的小數點來取代這個點線(dotted),用屬性 content 的方式填入”……….”,盡量填長一點,因為他不會重複,如果超過,我們可以用 overflow: hidden 掩蓋超過的部分。

如果嫌點點太小那就用 font-size 來更改大小,再用 letter-spacing 的方式,加大點與點的間距。

語法如下:

#box : before {
    content: “……………………..”;
    font-size: 8px;
    height: 10px;
    letter-spacing: 2px;
    display:block;
    overflow: hidden;
}

讓css邊框樣式表,點線(dotted)加大間距
標籤:    

發表迴響