边框

1、边框的粗细

2、边框的样式

3、边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*body总有一个默认的外边距margin：0，常见操作*/
    /*body{*/
    /*    margin: 0;*/
    /*    padding: 0;*/
    /*    text-decoration: none;*/
    /*}*/
    /*border：粗细，样式，颜色*/
    #box{
      width: 300px;
      border: 1px solid black;
    }
    h2{
      font-size: 16px;
      background: coral;
      line-height: 30px;
      color: white;
    }
    form{
      background: coral;
    }
    div:nth-of-type(1) input{
      border: 3px solid black;
    }
    div:nth-of-type(2) input{
      border: 2px dashed #FFE53B;
    }
    div:nth-of-type(3) input{
      border: 2px solid #88ec85;
    }
  </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>

 

posted @ 2022-04-11 23:11  少时凌云志  阅读(213)  评论(0)    收藏  举报