🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS: 添加边框框体 border: 1px solid #ccc; padding: 10px;

📝 使用场景

此模板展示了如何使用CSS的border: 1px solid #ccc;和padding: 10px;属性创建带有边框和内边距的框体。

📘 解释

上述CSS代码使用border: 1px solid #ccc;来添加边框，并使用padding: 10px;来添加内边距。此代码还设置了框体的宽度和边距，使其居中显示在页面上。

🔹 部分代码

此框体已应用边框和内边距。

<div class="demo-area">
  <p>此框体已应用边框和内边距。</p>
</div>

<style>
  .demo-area {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    width: 300px;
    margin: 20px auto;
  }
</style>

💻 完整HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS: 添加边框框体 border: 1px solid #ccc; padding: 10px;</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .demo-area {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
      width: 300px;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <div class="demo-area">
    <p>此框体已应用边框和内边距。</p>
  </div>
</body>
</html>

💻 完整功能代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>CSS: 添加边框框体 border: 1px solid #ccc; padding: 10px;</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .demo-area {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
      width: 300px;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <div class="demo-area">
    <p>此框体已应用边框和内边距。</p>
  </div>
</body>
</html>
已复制！

📌 边框盒子的实用技巧

简单的边框盒子是网页设计中的基本元素，可用于各种场景。通过结合使用 border 和 padding，可以在视觉上区分内容，并提供适当的内边距。

🎨 设计变体

仅仅改变边框样式，就能营造出截然不同的印象。例如使用 border: 2px dashed #999; 创建虚线边框，或使用 border: 3px double #333; 创建双线边框。同时加入 border-radius: 8px; 可使边角圆润，带来柔和的视觉效果。

📱 响应式设计要点

在移动设备上，建议适当减少 padding，如 padding: 5px;。通过使用媒体查询，例如 @media (max-width: 768px) { .demo-area { width: 90%; padding: 8px; } }，可以优化手机端的布局显示。

边框盒子适用于显示注意事项、补充说明、表单输入区域分组或商品特征描述等多种用途。若设置背景色，如 background-color: #f9f9f9;，可以进一步提升其视觉突出度。

关键在于在整个网站中统一边框的样式，例如颜色、粗细、是否使用圆角等。若结合使用 box-shadow: 0 2px 4px rgba(0,0,0,0.1); 添加阴影效果，还能使边框盒子更具立体感，吸引用户注意。

相关模板