在前端開發中，CSS3是一個非常重要的技術，它不僅可以讓網頁更美觀，也可以提升網頁的交互體驗和頁面響應速度。下面我們來看一些在工作中常用的CSS3技巧。

CSS3選擇器：

/* 通過屬性選擇元素 */
input[type="text"]{
font-size: 1.6rem;
border: 1px solid #ccc;
}
/* 選擇所有緊貼其父元素底部的元素 */
.parent >:last-child{
margin-bottom: 0;
}

CSS3動畫：

.animation{
/* 設置動畫名稱為rotate，持續時間為2s，動畫延遲時間為0.5s，重復次數為無限 */
animation: rotate 2s 0.5s infinite;
}
@keyframes rotate{
/* 0%時，元素不旋轉 */
0%{
transform: rotate(0deg);
}
/* 100%時，元素順時針旋轉360度 */
100%{
transform: rotate(360deg);
}
}

CSS3漸變色：

.gradient{
/* 在水平方向上使用漸變色 */
background: linear-gradient(to right, #ffcb5c, #f1cd87);
}

CSS3盒子模型：

/* 內外邊距分別設置為20px和10px */
.box{
padding: 20px;
margin: 10px;
/* 設置元素的寬度為300px，高度為200px，并且在盒子模型中包含了padding和border的值 */
width: 300px;
height: 200px;
/* 設置邊框為1px的實線，顏色為#ccc */
border: 1px solid #ccc;
}

CSS3文本溢出處理：

.ellipsis{
/* 不換行 */
white-space: nowrap;
/* 超出部分顯示省略號 */
overflow: hidden;
text-overflow: ellipsis;
}

CSS3響應式布局：

/* 在屏幕寬度小于768px時，元素寬度為100% */
@media screen and (max-width: 767px){
.container{
width: 100%;
}
}

以上是工作中常用的一些CSS3技巧，希望對各位前端開發者有所幫助。