1、垂直對齊

.vc{position:relative;top:50%;transform:translateY(-50%) }

2、只在一側或者兩側有投影

.box-shaow{position: absolute;top: 50%;left:50%;margin-left: -80px;margin-top: -45px;width: 160px;height: 90px;background-color: #ac92ec}.box-shaow::after{content: '';width: 150px;height: 1px;margin-top: 88px;margin-left: -75px;display: block;position: absolute;left:50%;z-index: -1;box-shadow: 0px 0px 8px 2px #000;}

3、漸變背景動畫效果

button{padding: 15px;background-image: linear-gradient(#fc6e51,#fff);background-size:auto 200%;background-position: 0 100%;transition: background-position 0.5s;}button:hover{background-position: 0 0;}

?

轉載于:https://www.cnblogs.com/sunsie/p/7724882.html

總結

以上是生活随笔為你收集整理的常用的css片段的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。