響應式網頁前端設計

第一階段
加強熟識HTML&CSS

第二階段
學習JavaScript&jQuery

第三階段
Bootstrap協助專案設計

第四階段
w3.css協助專案設計

第五階段
自行開發網站專案設計

第六階段
Pug(Jade)&Sass協助開發效率

=== TSuiling write 2018.07 ===

響應式網頁前端設計【第一階段】加強熟識HTML&CSS

CSS3 邊框的圓角與影像

有關邊框的新屬性

版本 屬性 說 明
3 border-radius 區塊方框四個角的圓角設計。 參考【英文版】 【英文版】 【簡中版
3 border-image 以影像設計區塊的邊框。 參考【英文版】 【簡中版
border-image: source slice width outset repeat;
border-image-source: url(border.png); 邊框圖像
border-image-slice: 50% 50%; 邊框圖像向內偏移的距離(%是圖像的百分比大小)
border-image-width: 30 30; 邊框圖像的大小
border-image-outset: 30 30; 邊框圖像向外移動的距離

圓角範例已設定好的部份

<div class="b2"></div>

<style>
.b2 { width: 300px; height: 300px; margin: 30px auto; background-color: lightsteelblue; }
</style>

測試圓角的設計

 

邊框影像範例已設定好的部份

<div class="b2"></div>

<style>
.b3 { width: 350px; height: 200px; background-color: lightsteelblue;
      margin: 30px auto; padding: 15px; border: 15px solid transparent; }
</style>

 

測試邊框影像的設計

 

測試練習各種邊框樣式 參考結果