※ 引述《yllan (藍永倫)》之銘言:
: 我想要做自訂的邊框,例如
: ◎﹏﹏﹏﹏﹏﹏﹏﹏﹏◎
: ︴This is a custom ︴
: ︴border box. ︴
: ︴ ︴
: ︴ ︴
: ◎﹏﹏﹏﹏﹏﹏﹏﹏﹏◎
: 之前有人用 CSS 做出四個角落是圓角的方框嘛,方法是上下加一個 <b>
: 然後畫許多橫線疊在一起。
: 那如果我是想要在角落以及波浪的地方都用自己設定的圖片呢?
: (就是把一個 box 切成九宮格,中間那格放內容,邊緣的八格各自設定背景圖片)
: 好處是這樣只要八張圖就可以適用於任何大小的方塊,不像我看過有些人的作法是
: 固定寬度,然後長度自動延伸的。
: 可是呢,我又希望能把這個寫簡潔一點,畢竟 CSS 就是要讓設計和 html markup
: 分開呀~我又不想要在 html 寫:
: <div class="customBox">
: <span class="topRow"> (left)(center)(right) </span>
: <span class="middleRow"> (left)( )(right) </span>
: <span class="bottomRow"> (left)(center)(right) </span>
: </div>
: 這樣我哪天不想要這個設計的時候,那些層層疊疊的全都變廢碼。
: 希望能這樣啦:
: <div class="textblock"> ... </div>
: CSS 有沒有什麼辦法可以做到呀~謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 218.172.203.39
※ 編輯: drkkimo 來自: 218.172.203.39 (02/11 21:11)
※ 編輯: drkkimo 來自: 218.172.203.39 (02/11 21:12)
有人是用巢狀的方式來作 像這樣
<div id=a><div id=b><div id=c><div id=d>
內容
</div></div></div></div>
#a、#b、#c、#d 的css在個自設定背景 還有背景圖片只靠某個方向重覆貼圖(請自已參考
有關的css標籤)