一、選取所選元素背景色和顏色

      p::selection{
            background:orange;
            color:purple;
        }

二.設(shè)置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;
}

disabled禁用input輸入框

/* disabled禁用input輸入框 */
        input:disabled{
            border:2px solid black;
        }

設(shè)置input聚焦時(shí)的樣式

input:focus {   
  background-color: red;
}

控制光標(biāo)位置

text-indent:2em;

去掉邊框

border: none;
outline: none;

三,文本省略號(hào)

單行

width:10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

自動(dòng)換行

word-wrap: break-word;
word-break：break-all;

四,css制作三角形

正三角形

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

倒三角形

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

五.元素居中

定位的元素居中

#demo {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: green;
}

flex元素居中

.s{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

字體漸變色

.s{
   background: linear-gradient(180deg, #FFFFFF 0%, #79DEFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}