在使用CSS的過程中,難免會遇到一些寫不出來的情況,這不僅是初學者的問題,即便是有經驗的開發者也會遇到。接下來,我們來探討一下CSS中寫不出來的一些問題。
/*1. 垂直居中*/ .parent { display: flex; align-items: center; justify-content: center; } /*2. 兩列自適應布局*/ .parent { display: flex; } .left { flex: 1; } .right { flex: 1; } /*3. 鼠標懸浮效果*/ .parent { position: relative; } .child { position: absolute; top: 0; left: 0; visibility: hidden; opacity: 0; transition: all .3s ease; } .parent:hover .child { visibility: visible; opacity: 1; } /*4. 文字溢出省略號*/ .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*5. 內外陰影*/ .parent { box-shadow: 0 0 10px rgba(0, 0, 0, .5); padding: 10px; } /*6. 背景圖居中*/ .parent { /*1)background-position:center; 2)background-size:cover;*/ background: url('xxx.jpg') no-repeat center/cover; } /*7. 文字首行縮進*/ .text { text-indent: 2em; } /*8. 三角形*/ .triangle { width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent transparent red transparent; } /*9. 圓形圖片*/ .circle { /*1)border-radius:50%; 2)clip-path:circle(50% at center);*/ width: 200px; height: 200px; background: url('xxx.jpg') no-repeat center/cover; clip-path: circle(50% at center); } /*10. 全屏背景*/ body { background: url('xxx.jpg') no-repeat center/cover; }
以上是一些常見的CSS寫不出來的問題及其解決方法,且無論是在響應式布局還是動畫效果上,CSS的應用場景都非常廣泛,需要我們不斷加強學習,不斷掌握新的技巧,才能更好地應對各種開發需求。
上一篇css中內容水平向上居中
下一篇css中兄弟選擇器有哪些