當前位置:妙知谷 >

母嬰教育 >學習交流 >

css 圓角 css圓角 css3 圓角代碼實現

css 圓角 css圓角 css3 圓角代碼實現

css 圓角是一種常用的頁面處理方式,css1及css2的處理方式是採用背景圖片的方式處理的;css3處理的方式瀏覽器支持的原生的,使用樣式屬性border-radius。
本文重點講解的是基於css3的處理方式。

操作方法

(01)CSS3圓角處理的方式:<div id="yuanjiao"></div>#yuanjiao{padding:10px;width:300px;height:100px;border: 3px solid #dedede;-moz-border-radius: 25px;      /* 火狐瀏覽器 */-webkit-border-radius: 25px;   /* 谷歌和Safari瀏覽器 */border-radius:25px;            /* W3C 語法支持的瀏覽器 */}border-radius:5px 15px 20px 25px;四個參數的方位:上、右、下、左也可以分開寫border-top-left-radius: 20px;border-top-right-radius: 20px;border-bottom-right-radius: 20px;border-bottom-left-radius:  20px;

css 圓角 css圓角 css3 圓角代碼實現

(02)書寫次序需要注意,要按照一下次序書寫/* 火狐瀏覽器 */-moz-border-radius: 25px;/* 谷歌和Safari瀏覽器 */-webkit-border-radius: 25px;/* W3C 語法支持的瀏覽器 */border-radius:25px;

  • 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/jy/jiaoliu/471zd.html