如何使用css讓圖片顯示圓角

CSS3圓角只需設置一個屬性：border-radius（含義是"邊框半徑"）。你為這個屬性提供一個值，就能同時設置四個圓角的半徑。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

創(chuàng)新互聯(lián)公司專注于廣安企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設,商城系統(tǒng)網(wǎng)站開發(fā)。廣安網(wǎng)站建設公司,為廣安等地區(qū)提供建站服務。全流程按需定制開發(fā)，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

代碼實例：border-radius: 15px;

1、把下列代碼添加進入你的style標簽內

2、清空緩存，看看效果吧（部分IE版本可能不支持）

預覽

總結

這是個很實用的方法，可以讓圖片看起來更「精巧」一些

如何用css制作圖片自動圓角，謝謝了！

需要準備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

2、在index.html中的style標簽中，輸入css代碼：img { border-radius: 20px}。

3、瀏覽器運行index.html頁面，此時頁面插入的圖片會自動顯示圓角20px的。

如何用CSS代碼設定按鈕的圓角樣式？

用CSS代碼設定按鈕的圓角樣式，這個在css3中才能實現(xiàn)，通過使用border-radius來實現(xiàn)這個效果，不過有瀏覽器的兼容性問題，-moz(例如 -moz-border-radius)用于Firefox；-webkit(例如：-webkit-border-radius)用于Safari和Chrome；border-radius:5px 15px 20px 25px;它的意思就是上的圓角5px，右的圓角15px，下的圓角20px，左的圓角25px，通過例子來實際看下：

div id="round"/div

#round {

padding:10px; width:300px; height:50px;

border: 5px solid #dedede;

-moz-border-radius: 15px; ? ? ?/* Gecko browsers */

-webkit-border-radius: 15px; ? /* Webkit browsers */

border-radius:15px; ? ? ? ? ? ?/* W3C syntax */

}

效果如圖：