盒子模型（重要）

最新推荐文章于 2024-06-22 17:15:40 发布

wwaitings

最新推荐文章于 2024-06-22 17:15:40 发布

阅读量59

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/m0_48219937/article/details/119486422

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文展示了如何使用CSS实现盒子模型的边框效果，包括实线、虚线和虚线颜色边框。示例中通过`border`属性设置元素边框宽度、样式和颜色，并利用`nth-of-type`选择器对不同输入框应用不同边框风格。同时，提到了内外边距和圆角边框以及盒子阴影等其他CSS样式应用。

摘要由CSDN通过智能技术生成

在这里插入图片描述

盒子模型的边框使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*h1,ul,li,a,body{*/
    /*  !*body总有一个默认的外边距margin:0,如果不设置为0的话页面就会空出一部分区域*!*/
    /*  margin: 0;*/
    /*  padding: 0;*/
    /*  text-decoration: none;*/
    /*}*/
    #box{
      width: 300px;
      border: 1px solid red;
    }
    h2{
      font-size: 16px;
      background: #b1bb20;
      line-height: 30px;
      color: #c6267e;
    }
    form{
      background: aquamarine;
    }
    div:nth-of-type(1) input{
      /*solid实线*/
      border: 3px solid black;
    }
    div:nth-of-type(2) input{
      /*dashed虚线*/
      border: 3px dashed black;
    }
    div:nth-of-type(3) input{
      border: 3px dashed pink;
    }
  </style>
</head>
<body>

<div id="box">
  <h2>会员登陆</h2>
  <form action="#">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="text">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="text">
    </div>
  </form>
</div>

</body>
</html>