Board logo

標題: Box Model 設計-邊框練習(三) [打印本頁]
作者: 陳育霖    時間: 2023-8-29 11:02     標題: Box Model 設計-邊框練習(三)

請利用 border-slice 將圖片(一)製作成圖片(二)的效果
圖片(一)
[attach]16364[/attach]
圖片(二)
[attach]16365[/attach]
本帖隱藏的內容需要回復才可以瀏覽
作者: 蔡幸融    時間: 2023-8-29 17:29

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <style>
  5.             .imgborder{
  6.                 border: solid 30px;
  7.                 border-image-source: url(borderfig.png);
  8.                 border-image-slice: 44;
  9.             }
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <div class="imgborder">
  14.             123456789
  15.         </div>
  16.     </body>
  17. </html>
複製代碼




歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/) Powered by Discuz! 7.2