色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css中寫不出來

錢斌斌2年前12瀏覽0評論

在使用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的應用場景都非常廣泛,需要我們不斷加強學習,不斷掌握新的技巧,才能更好地應對各種開發需求。