HTML & CSS 互動教學網

歡迎來到網頁開發的世界

想像你在蓋一棟房子：
HTML (結構) 是房子的鋼筋水泥與牆壁。
CSS (樣式) 是房子的油漆與家具。

💡 提示： 點擊左側目錄切換課程內容，或使用下方工具進行實戰！

CSS 屬性互動調整器

選擇下方的屬性值，直接觀察中間盒子的變化。這能幫助您理解 CSS 屬性的運作方式。

背景顏色 (Background)

圓角大小 (Border Radius)

陰影 (Box Shadow)

透明度 (Opacity)

觀察我的變化

生成的 CSS 代碼：


.box {
  background-color: #3b82f6;
  border-radius: 0px;
}

即時實驗室 (Live Playground)

編輯代碼 (HTML & CSS)

<style>
  .card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
  }
  h1 { color: #3b82f6; }
</style>

<div class="card">
  <h1>你好，世界！</h1>
  <p>試著使用調整器產生的 CSS 來裝飾我。</p>
</div>

即時預覽