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

css做其它形狀

謝彥文2年前13瀏覽0評論

使用CSS除了可以給網頁添加各種顏色、背景、邊框等樣式,還可以用來制作各種形狀。下面就來介紹幾種實現方式。

/*1. 圓形*/
.example{
width: 100px;
height: 100px;
background: #ccc;
border-radius: 50%; /*設置圓形半徑,50%表示寬高相等*/
}
/*2. 三角形*/
.example{
width: 0;
height: 0;
border-top: 50px solid #ccc;
border-right: 50px solid transparent; /*設置邊框顏色和樣式*/
}
/*3. 梯形*/
.example{
width: 100px;
height: 0;
border-top: 50px solid #ccc;
border-right: 25px solid transparent;
border-left: 25px solid transparent;
}
/*4. 菱形*/
.example{
width: 0;
height: 0;
border: 50px solid #ccc;
border-width: 0 25px 50px 25px;
transform: rotate(45deg); /*通過旋轉實現菱形*/
}
/*5. 右箭頭*/
.example{
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 20px solid #ccc;
}
/*6. 左箭頭*/
.example{
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 20px solid #ccc;
}
/*7. 上箭頭*/
.example{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 20px solid #ccc;
}
/*8. 下箭頭*/
.example{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #ccc;
}

以上是幾種常見的使用CSS制作其他形狀的方法,可以根據實際需要選擇適合自己的方式來實現。通過CSS的靈活運用,網頁可以呈現出更加形式多樣的效果。