1、 禁止input框點擊
<input type="text" disabled="disabled">

2、制作一個三角形 - 首先一個空的div元素
<div class="triangle"></div>
.triangle{
border-style: solid;
border-color: red transparent transparent transparent ;
border-width:100px 100px 0 100px;
width: 0px;
height: 0px;
}

3、css實現(xiàn)文本不換行、自動換行、強制換行
//不換行
white-space:nowrap;
//自動換行
word-wrap: break-word;
word-break: normal;
//強制換行
word-break:break-all;

4、 獲得焦點的表單元素，當一個表單元素獲得焦點時，可以將其突出顯示：
input:focus { border: 2px solid green; }

5、設置圖像透明度，兩種方式
opcity:0.6；
background:rgba(0,0,0,.6)；

6、實現(xiàn)背景圖片全屏自適應寬高
html,body{
width:100%;
height:100%
}
body{
background: url(images.jpg)no-repeat;
background-size: 100% 100%;
}

7、文字漸變效果
.text{
background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text;
color: transparent;
}

8、select 下拉選擇設置右對齊
select option {
direction: rtl;
}

9、實現(xiàn)文字豎向排版，最簡單的方法是設置較小的寬度，然后高度自適應。
p{
width: 25px;
line-height: 18px;
height: auto;
font-size: 12px;
padding: 8px 5px;
}

10、單行文本溢出顯示省略號
p{
overflow: hidden; //超出隱藏
width: 200px;
text-overflow: ellipsis; //當文本內(nèi)容溢出時顯示省略號
white-space: nowrap; //文本在同一行上不會換行，直到遇到
標簽為止
}

11、多行文本溢出顯示省略號
.box{
width: 100%;
overflow: hidden;
display: -webkit-box; //將對象作為彈性伸縮盒子模型顯示
-webkit-box-orient: vertical; //設置伸縮盒對象的子元素的排列方式
-webkit-line-clamp: 3; //用來限制在一個塊元素中顯示的文本的行數(shù)
word-break: break-all; //讓瀏覽器實現(xiàn)在任意位置的換行 break-all為允許在單詞內(nèi)換行
}

12、設置表單file控件上傳文件時可以選擇多個文件
<input type='file' multiple='true'> //設置multiple屬性值為true

13、實現(xiàn)文字一行水平居中，多行左對齊效果
<p class='text'><span>文本不換行時，居中</span></p>
<p class='text'><span>文本內(nèi)容過多，造成換行時，統(tǒng)一左對齊</span></p>
.text{
text-align: center;
}
.text span{
display: inline-block;
text-align: left;
}

14、文本空白會被保留
white-space: pre;

15、修改input輸入框中光標的顏色不改變字體的顏色
input{
color: #fff;
caret-color: red;
}

16、去除瀏覽器中 input button 等標簽獲得焦點時的帶顏色邊框
input, textarea, button{
outline:none;
}
更多前端方面知識請訪問:www.sunluyi.cn