• Set the font style for the input placeholder

  • Single – and multi-line text exceeds the ellipsis

  • Negative margin techniques

  • Position and set the bearing situation

  • Common scenarios for adjacent sibling selectors

  • Handy tips for using the Outline property

  • Hide the scroll bar or change the scroll bar style

  • Pure CSS draws triangles

  • Dotted box drawing skills

  • Card effect creation

  • There are two common ways to hide text

  • Table border merge

1-1. Set the font style for the input placeholder

Sets the style of the input placeholder

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
    color: red;
}
input::-moz-placeholder { /* Firefox 19+ */  
    color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
input:-moz-placeholder { /* Firefox 18- */
    color: red;
}

<inputType ="text" placeholder=" placeholder ">Copy the code

Sets the style for focusing the input

input:focus {   
  background-color: red;
}
Copy the code

Unborder input

border: none;
outline: none;
Copy the code
<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>A summary of advanced common CSS techniques</title>
  <style type="text/css">
    input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
      color: red;
    }
    input::-moz-placeholder { /* Firefox 19+ */
      color: red;
    }
    input:-ms-input-placeholder { /* IE 10+ */
      color: red;
    }
    input:-moz-placeholder { /* Firefox 18- */
      color: red;
    }
    input:focus {
      background-color: red;
    }
    input{
      border: none;
      outline: none;
    }
  </style>
</head>
<body>
<input type="text" placeholder="Please set user name">
</body>
</html>
Copy the code

1-2. Single-line and multi-line text beyond ellipsis

// Ellipses appear in a single line of textwidth: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all; // Ellipses appear in multiple lines of textdisplay: -webkit-box; /* The object is displayed as an elastic stretchable box model */
-webkit-box-orient: vertical; /* Vertically rows the child elements from top to bottom (sets the arrangement of the child elements of the flex box) */
-webkit-line-clamp: 3; /* The number of lines, more than three hidden and extra ellipsis denoted... * /
line-clamp: 3;
word-break: break-all;
overflow: hidden;
max-width: 100%;
Copy the code
<div class="container">
  <p class="single">
    <span class="c-red">Single overflow:</span>ECMAScript 6 Tutorial is an open source JavaScript language tutorial that provides a comprehensive overview of the new syntax features introduced in ECMAScript 6.</p>
  <p class="mutiple">
    <span class="c-red">Multi-line overflow:</span>ECMAScript 6 Tutorial is an open source JavaScript language tutorial that provides a comprehensive overview of the new syntax features introduced in ECMAScript 6. This book covers all the differences between ES6 and the previous version of ES5, gives a detailed introduction to the syntax involved, and provides a lot of concise and easy to understand code examples.</p>
</div>
Copy the code
/ * * / container
    .container {
      width: 300px;
      height: 200px;
      margin: 100px;
      padding: 20px;
      border: 1px solid #eee;
      font-size: 13px;
      color: # 555;
    }

    .c-red {
      color: red;
    }

    p {
      background-color: rgba(189.227.255.0.28);
      padding: 2px 5px;
    }

    / * * / line
    .single {
      width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }

    / * * /
    .mutiple {
      display: -webkit-box; /* The object is displayed as an elastic stretchable box model */
      -webkit-box-orient: vertical; /* Vertically rows the child elements from top to bottom (sets the arrangement of the child elements of the flex box) */
      -webkit-line-clamp: 3; /* The number of lines, more than three hidden and extra ellipsis denoted... * /
      line-clamp: 3;
      word-break: break-all;
      overflow: hidden;
      max-width: 100%;
    }
Copy the code

1-3. Techniques for using negative margins

Rule: when left is negative, it is left shift; when right is negative, it is left pull. Up and down are similar to left and right

* {margin:0;
    padding:0;
}
.wrap{
    /* Use negative technique to move overall */
    margin-left: -6px;
}
.item{
    float:left;
    width: 20%;
    height: 300px;
    border-left:6px solid #fff;
    box-sizing: border-box;
}
<div class="wrap">
    <div class="item" style="background-color: red;" ></div>
    <div class="item" style="background-color: green;" ></div>
    <div class="item" style="background-color: yellow;" ></div>
    <div class="item" style="background-color: pink;" ></div>
    <div class="item" style="background-color: green;" ></div>
</div>
Copy the code

1-4. Set the azimuth at the same time

Rule: Setting both left and right is the same as implicitly setting the width for absolute and fixed positioning

span{
  border:1px solid red;
  position: absolute;
  left:0;
  right:0;
  
   /* Set width:100%; display:block */
}
<span>1</span>
Copy the code

1-5. Common scenarios for adjacent sibling selectors

ul{
  width: 500px;
   margin:auto;
   list-style: none;
   padding:0;
   border:1px solid red;
   text-align: center;
 }
 li+li{
   border-top:1px solid red;
 }
Copy the code
<ul>
 <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
Copy the code

1-6. Handy tips for using the Outline property

Difference: Outline does not calculate size border calculates size

* {
    padding: 0;
    margin: 0;
  }

  ul {
    list-style: none;
    width: 600px;
    margin: auto;
  }

  li {
    padding: 10px;
    border: 10px solid pink;
    outline-offset: -10px;
  }
  li+li{
    margin-top:-10px;
  }
  li:hover{
    /* border:10px solid gold; */
    outline:10px solid gold;
  }
Copy the code
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
Copy the code

1-7. Hide the scroll bar or change the scroll bar style

.scroll-container { width: 500px; height: 150px; border: 1px solid #ddd; padding: 15px; overflow: auto; /* Must */}. Scroll -container::-webkit-scrollbar {width: 8px; background: white; }. Scroll container::-webkit-scrollbar-corner, /* scroll corner */. Scroll container::-webkit-scrollbar-thumb, .scroll-container::-webkit-scrollbar-track {/* scrollbar */ border-radius: 4px; } .scroll-container::-webkit-scrollbar-corner, .scroll-container::-webkit-scrollbar-track {/* scrollbar */ background-color: rgba(180, 160, 120, 0.1); Box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5); }. Scroll -container::-webkit-scrollbar-thumb {/* scrollbar */ background-color: #00adb5; }Copy the code
<p class="scroll-container">How deep is the courtyard? Willow yiyi, blowing up pieces of smoke, a heavy curtain do not know how many layers. She went upstairs and looked away, but could not see the road leading to Zhangtai. Spring has come to the evening, march rain accompanied by strong winds, and then the heavy door closed the dusk scenery, but also can not keep the spring. Tearful eyes asked falling flowers can know my heart, falling flowers silent, confused, little by little fly to the swing. How deep is the courtyard? Willow yiyi, blowing up pieces of smoke, a heavy curtain do not know how many layers. She went upstairs and looked away, but could not see the road leading to Zhangtai. Spring has come to the evening, march rain accompanied by strong winds, and then the heavy door closed the dusk scenery, but also can not keep the spring. Tearful eyes asked falling flowers can know my heart, falling flowers silent, confused, little by little fly to the swing. How deep is the courtyard? Willow yiyi, blowing up pieces of smoke, a heavy curtain do not know how many layers. She went upstairs and looked away, but could not see the road leading to Zhangtai. Spring has come to the evening, march rain accompanied by strong winds, and then the heavy door closed the dusk scenery, but also can not keep the spring. Tearful eyes asked falling flowers can know my heart, falling flowers silent, confused, little by little fly to the swing. How deep is the courtyard? Willow yiyi, blowing up pieces of smoke, a heavy curtain do not know how many layers. She went upstairs and looked away, but could not see the road leading to Zhangtai. Spring has come to the evening, march rain accompanied by strong winds, and then the heavy door closed the dusk scenery, but also can not keep the spring. Tearful eyes asked falling flowers can know my heart, falling flowers silent, confused, little by little fly to the swing.</p>
Copy the code

1-8. Draw triangles with pure CSS

/* triangle */. Triangle {width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent rgb(245, 129, 127) transparent; } /* triangle */. Down-triangle {width: 0; height: 0; border-style: solid; border-width: 40px 25px 0 25px; border-color: rgb(245, 129, 127) transparent transparent transparent; } div:last-child { margin-top: 1rem; }Copy the code

1-9. Dotted box drawing skills

.dotted-line { width: 800px; margin: auto; padding: 20px; border: 1px dashed transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em); <p class="dotted line"> Willow yiyi, blowing up pieces of smoke, a heavy curtain do not know how many layers. </p>Copy the code

1-10. Card voucher effect making

.coupon {
 width: 300px;
  height: 100px;
  line-height: 100px;
  margin: 50px auto;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
  radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
  radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
  radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}
.coupon span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  color: red;
  font-size: 50px;
  font-weight: 400;
}
Copy the code
<p class="coupon">
 <span>200</span>coupons</p>
Copy the code

1-11. Two common ways to hide text

text-indent: -9999px; Or the font – size: 0;

.logo {
 width: 190px;
  height: 80px;
  float: left;
  margin-top: 8px
}

.logo h1 {
  position: relative
}

.logo h1 .logo-bd {
  display: block;
  margin-left: 22px;
  padding-top: 58px;
  width: 142px;
  overflow: hidden;
  background: url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png) 0 0 no-repeat;
  text-indent: -9999px;
}
Copy the code
<h1>
  <a href="#" role="img" class="logo-bd clearfix">taobao</a>
</h1>
Copy the code

1-12. Table border merge

table{
  border-collapse: collapse;
}
Copy the code
<table border="1">
    <thead>
    <tr>
      <th>The first column</th>
      <th>The second column</th>
      <th>The third column</th>
      <th>The fourth column</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      <td>1.4</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      <td>2.4</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      <td>3.4</td>
    </tr>
    </tbody>
  </table>
Copy the code

After the merger