在前端开发中，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技巧，希望对各位前端开发者有所帮助。