3 回答

TA貢獻1816條經驗 獲得超6個贊
css代碼:
.yj{
padding:10px; width:300px; height:50px;
border: 2px solid #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px;
}
-moz-border-radius: 15px; -webkit-border-radius: 15px; 這兩個是為了兼容其他一些不常用瀏覽寫的css圓角代碼
html代碼:
<div class="yj">這個div四個角都圓15px;</div>
結果如下:
圖片圓角也是一樣的:
css代碼:
.yj{-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px;}
html代碼:
<img src="xp.jpg" width="100px" height="100px;" class="yj" />
結果如下:
3
css3圓角代碼也支持上下左右的:
css代碼這么寫:
.yj{
padding:10px; width:300px; height:50px;
border: 2px solid #000000;
-moz-border-radius: 0px 0px 20px 25px;;
-webkit-border-radius: 0px 0px 20px 25px;;
border-radius:0px 0px 20px 25px;;
}

TA貢獻1809條經驗 獲得超8個贊
css3有一種新功能就是給div或者是圖片等圓角,圓角代碼怎么寫你知道嗎,作為一個經常寫css的網站制作者,今天跟大家分享一下css圓角邊框代碼,當然圖片圓角也是一樣的,我分享的代碼盡量兼容各種瀏覽器,包括ie、360瀏覽器、百度瀏覽器、谷歌瀏覽器等
方法/步驟
1.css代碼:
.yj{
padding:10px; width:300px; height:50px;
border: 2px solid #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px;
}
-moz-border-radius: 15px; -webkit-border-radius: 15px; 這兩個是為了兼容其他一些不常用瀏覽寫的css圓角代碼
<div class="yj">這個div四個角都圓15px;</div>
結果如下:
2 .圖片圓角也是一樣的:
css代碼:
.yj{-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px;}
<img src="xp.jpg" width="100px" height="100px;" class="yj" />
3.css3圓角代碼也支持上下左右的:
css代碼這么寫:
.yj{
padding:10px; width:300px; height:50px;
border: 2px solid #000000;
-moz-border-radius: 0px 0px 20px 25px;;
-webkit-border-radius: 0px 0px 20px 25px;;
border-radius:0px 0px 20px 25px;;
}
4.圓角代碼也支持拆分的(四個邊框都圓角10px的拆分css代碼如下):
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
border-bottom-left-radius: 10px;
- 3 回答
- 0 關注
- 773 瀏覽
添加回答
舉報