/* Border-radius:圆角 */ div{ border-radius: 10px; } /* Box-shadow:阴影效果 */ div{ box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); } /* Transform:旋转、缩放、偏移 */ div{ transform: rotate(45deg) scale(1.5) translate(20px, 20px); } /* Transition:过渡效果 */ div{ transition: all 0.5s ease-in-out; } div:hover{ transform: scale(1.2); } /* Animation:动画效果 */ @keyframes rotate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } div{ animation: rotate 2s infinite linear; }
以上就是偶在CSS3方面的一些个人技能,虽然只是一些基础的属性和效果,但是结合起来可以创造出令人惊艳的效果。同时,熟练掌握CSS3技能不仅可以提高工作效率,还可以丰富网站的视觉效果,让用户体验更佳。偶相信随着技术的不断发展,CSS3也会越来越受到前端开发工程师的重视和使用。