[問題] CSS 自定邊框?
我想要做自訂的邊框,例如
◎﹏﹏﹏﹏﹏﹏﹏﹏﹏◎
︴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: 140.112.31.131
討論串 (同標題文章)
以下文章回應了本文 (最舊先):
完整討論串 (本文為第 1 之 3 篇):
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章