编程知识 cdmana.com

CSS that you can't remember, but you always use

   Do you often come across some styles and write them with Baidu every time ? I've collected some styles that I usually use but can't remember . If there is any mistake, please correct it . Reprint please indicate the source .

   One 、 Set up input Of placeholder The font style of

  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;

  }

   Copy code

   Set up input The pattern of focus

  input:focus {

  background-color: red;

  }

   Copy code

   Cancel input Border

  border: none;

  outline: none;

   Copy code

   Two 、 Hide the scroll bar or change the scroll bar style

  /css The pattern of the main part // Define the width, height and background of the scroll bar , Width and height respectively correspond to the size of horizontal and vertical scroll bars /

  ::-webkit-scrollbar {

  width: 10px; / Effective for vertical flow bar /

  height: 10px; / Effective for horizontal bars /

  }

  / Define the track color of the scroll bar 、 Inner shadow and fillets /

  ::-webkit-scrollbar-track{

  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

  background-color: rosybrown;

  border-radius: 3px;

  }

  / Define slider color 、 Inner shadow and fillets /

  ::-webkit-scrollbar-thumb{

  border-radius: 7px;

  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

  background-color: #E8E8E8;

  }

  / Define the style of the buttons at both ends /

  ::-webkit-scrollbar-button {

  background-color:cyan;

  }

  / Define the style at the lower right corner of the junction /

  ::-webkit-scrollbar-corner {

  background:khaki;

  }

   Copy code

   3、 ... and 、 Text beyond hide and show ellipsis

   A single ( It has to be wide )

  width:200rpx;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

   Copy code

   Multiple lines

  word-break: break-all;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

   Copy code

   Four 、 control div Wrap the elements inside

  word-wrap: break-word;

  word-break:break-all;

   Copy code

   5、 ... and 、 pure css Draw a triangle

  #demo {

  width: 0;

  height: 0;

  border-width: 20px;

  border-style: solid;

  border-color: transparent transparent red transparent;

  }

   Copy code

   6、 ... and 、 Absolute positioning elements in the middle ( Horizontal and vertical )

  #demo {

  width: 200px;

  height: 200px;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

  background-color: green;

  }

   Copy code

   7、 ... and 、 Table border merge

  table,tr,td{border: 1px solid #333;}

  table{

  border-collapse: collapse;

  }

   Copy code

版权声明
本文为[osc_60387719]所创,转载请带上原文链接,感谢

Scroll to Top