DIV 设置四个角的border

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>DIV 设置四个角的border</title>
  9.   <style>
  10.     .chart-border-block {
  11.       position: relative;
  12.       width: 500px;
  13.       height: 500px;
  14.       /* background: #28305c; */
  15.       box-sizing: border-box;
  16.       border: 2px solid #565B77;
  17.       border-radius: 10px;
  18.     }
  20.     .chart-border-block:before {
  21.       content: '';
  22.       position: absolute;
  23.       width: 80%;
  24.       height: 100%;
  25.       bottom: -2px;
  26.       top: -2px;
  27.       left: 10%;
  28.       border-bottom: 2px solid #fff;
  29.       border-top: 2px solid #fff;
  30.       pointer-events: none;
  31.     }
  33.     .chart-border-block:after {
  34.       content: '';
  35.       position: absolute;
  36.       width: 100%;
  37.       height: 80%;
  38.       left: -2px;
  39.       right: -2px;
  40.       top: 10%;
  41.       border-left: 2px solid #fff;
  42.       border-right: 2px solid #fff;
  43.       pointer-events: none;
  44.     }
  45.   </style>
  46. </head>
  48. <body>
  49.   <div class="chart-border-block">
  50.   </div>
  51. </body>
  53. </html>

INPUT 输入框自定义

描述：去掉自己的原生样式，然后左右边框半高

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>INPUT 输入框自定义</title>
  9.   <style>
  10.     html,
  11.     body {
  12.       padding: 0;
  13.       margin: 0;
  14.     }
  16.     body {
  17.       height: calc(100vh);
  18.       display: flex;
  19.       justify-content: center;
  20.       align-items: center;
  21.     }
  23.     .container {
  24.       position: relative;
  25.       width: 400px;
  26.       height: 30px;
  27.       background: gray;
  28.       box-sizing: border-box;
  29.       border-bottom: 1px solid #333;
  30.     }
  32.     .container:before {
  33.       position: absolute;
  34.       content: "";
  35.       width: 100%;
  36.       height: 50%;
  37.       bottom: 0px;
  38.       border-left: 1px solid #333;
  39.     }
  41.     .container:after {
  42.       position: absolute;
  43.       content: "";
  44.       width: 100%;
  45.       height: 50%;
  46.       bottom: -1px;
  47.       border-right: 1px solid #333;
  48.     }
  50.     input {
  51.       width: 100%;
  52.       height: 100%;
  53.       line-height: 100%;
  54.       border: 0;
  55.       box-sizing: border-box;
  56.       padding: 0px 2px;
  57.       background: gray;
  58.     }
  59.   </style>
  60. </head>
  62. <body>
  63.   <div class="container">
  64.     <input type="text">
  65.   </div>
  66. </body>
  67. </html>