十幾個CSS高級常見技巧匯總（虛線框、三角形、優惠券卡券、滾動條、多行溢出...）

• 設置input的placeholder的字體樣式

• 單行和多行文本超出省略號

• 負邊距使用技巧

• 定位同時設置方位情況

• 相鄰兄弟選擇器之常用場景

• outline屬性的妙用技巧

• 隱藏滾動條或更改滾動條樣式

• 純CSS繪制三角形

• 虛線框繪制技巧

• 卡券效果制作

• 隱藏文本的常用兩種方法

• 表格邊框合並

---

 

設置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;
    }
    input:focus {
      background-color: red;
      color:black;
    }       

 

設置input聚焦時的樣式

input:focus {background-color: #b5b9a9;}

 

 

 取消input的邊框

border: none;
outline: none;

 

單行和多行文本超出省略號

  .container {
        width: 300px;
        height: 200px;
        margin: 100px;
        padding: 20px;
        border: 1px solid #eee;
        font-size: 13px;
        color: #555;
        outline: brown 1px solid;
    }

    /* 單行 */
    .single {
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 多行 */
    .mutiple {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient: vertical;
    }

 

 

 

定位同時設置方位情況

規律: 絕對定位和固定定位時，同時設置 left 和 right 等同於隱式地設置寬度

span{
  border:1px solid red;
  position: absolute;
  left:0;
  right:0;
  
   /* 等同於設置  width:100%;display:block */
}
<span>1</span>

 

相鄰兄弟選擇器之常用場景

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

 

 

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

 

 

outline屬性的妙用技巧

區別: outline不計算大小 border計算大小

outline-offset屬性設置輪廓框架在 border 邊緣外的偏移

* {
    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;
  }

 

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

 

 

隱藏滾動條或更改滾動條樣式

 

.scroll-container {
   width: 500px;
   height: 150px;
   border: 1px solid #ddd;
   padding: 15px;
   overflow: auto;     /*必須*/
 }

 .scroll-container::-webkit-scrollbar {
   width: 8px;
   background: white;
 }

 .scroll-container::-webkit-scrollbar-corner,
   /* 滾動條角落 */
 .scroll-container::-webkit-scrollbar-thumb,
 .scroll-container::-webkit-scrollbar-track {      /*滾動條的軌道*/
   border-radius: 4px;
 }

 .scroll-container::-webkit-scrollbar-corner,
 .scroll-container::-webkit-scrollbar-track {
   /* 滾動條軌道 */
   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 {
   /* 滾動條手柄 */
   background-color: #00adb5;
 }

<p class="scroll-container">
        庭院深深，不知有多深？楊柳依依，飛揚起片片煙霧，一重重簾幕不知有多少層。豪華的車馬停在貴族公子尋歡作樂的地方，她登樓向遠處望去，卻看不見那通向章台的大路。春已至暮，三月的雨伴隨着狂風大作，再是重門將黃昏景色掩閉，也無法留住春意。淚眼汪汪問落花可知道我的心意，落花默默不語，紛亂的，零零落落一點一點飛到秋千外。庭院深深，不知有多深？楊柳依依，飛揚起片片煙霧，一重重簾幕不知有多少層。豪華的車馬停在貴族公子尋歡作樂的地方，她登樓向遠處望去，卻看不見那通向章台的大路。春已至暮，三月的雨伴隨着狂風大作，再是重門將黃昏景色掩閉，也無法留住春意。淚眼汪汪問落花可知道我的心意，落花默默不語，紛亂的，零零落落一點一點飛到秋千外。庭院深深，不知有多深？楊柳依依，飛揚起片片煙霧，一重重簾幕不知有多少層。豪華的車馬停在貴族公子尋歡作樂的地方，她登樓向遠處望去，卻看不見那通向章台的大路。春已至暮，三月的雨伴隨着狂風大作，再是重門將黃昏景色掩閉，也無法留住春意。淚眼汪汪問落花可知道我的心意，落花默默不語，紛亂的，零零落落一點一點飛到秋千外。庭院深深，不知有多深？楊柳依依，飛揚起片片煙霧，一重重簾幕不知有多少層。豪華的車馬停在貴族公子尋歡作樂的地方，她登樓向遠處望去，卻看不見那通向章台的大路。春已至暮，三月的雨伴隨着狂風大作，再是重門將黃昏景色掩閉，也無法留住春意。淚眼汪汪問落花可知道我的心意，落花默默不語，紛亂的，零零落落一點一點飛到秋千外。
</p>

 

 

漸變虛線框繪制技巧

.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">庭院深深，不知有多深？楊柳依依，飛揚起片片煙霧，一重重簾幕不知有多少層。</p>

 

繪制三角形

/* 正三角 */
.up-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 25px 40px 25px;
   border-color: transparent transparent rgb(245, 129, 127) transparent;
 }

 /* 倒三角 */
 .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;
 }