網(wǎng)頁(yè)設(shè)計(jì)的CSS3圓角效果
發(fā)表日期:2020/9/11 17:29:36 文章編輯: 瀏覽次數(shù):2158
以往在網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候,要做圓角都要很辛苦的做圖片,我們一開(kāi)始介紹了制作圓角的方便網(wǎng)站,后來(lái)我們又介紹了使用Javascript制作圓角的方法,今天來(lái)跟大家介紹CSS3的圓角效果,更快更方便,不過(guò)前提是瀏覽者使用夠新的瀏覽器:)
目前各瀏覽器最新版本都支援CSS3的圓角效果,下面列出各瀏覽器在小邊寫(xiě)這篇文章時(shí)最新版本的載點(diǎn):
Firefox 7.0 Google Chrome 14 IE 9 Opera 11 Safri 5 (上面的清單是按照字母排序的,雖然剛好和小編的使用頻率一樣X(jué)D),大家快去更新吧,為了更好的瀏覽效果!
DEMO范例
語(yǔ)法說(shuō)明
只需要在CSS里面加入下面這兩行就可以了
border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */
也可以做一些變化,填入不同的圓角半徑,分別是代表左上右上右下左下
border-radius:40px 30px 40px 10px;
-moz-border-radius:40px 30px 40px 10px; /* Firefox 3.6 and earlier */
參考連結(jié): W3Cschools
-
網(wǎng)站規(guī)劃如何理解并規(guī)劃網(wǎng)站的結(jié)構(gòu)設(shè)計(jì)?
日期:2021-03-29 瀏覽次數(shù):2188
-
網(wǎng)站設(shè)計(jì)的CSS3 漸層特效教學(xué)
日期:2020-09-11 瀏覽次數(shù):1889
-
網(wǎng)頁(yè)設(shè)計(jì)中純CSS3動(dòng)畫(huà)區(qū)塊代碼書(shū)寫(xiě)方法。
日期:2020-09-11 瀏覽次數(shù):2211
-
免費(fèi)SSL證書(shū)申請(qǐng)網(wǎng)站topssl.cn上線(xiàn)
日期:2024-09-23 瀏覽次數(shù):1089
-
如何在北京順義尋找一個(gè)踏實(shí)的網(wǎng)站建設(shè)公司
日期:2023-08-10 瀏覽次數(shù):4141
-
順義網(wǎng)站建設(shè):北京順義網(wǎng)站建設(shè)的優(yōu)點(diǎn)
日期:2023-05-25 瀏覽次數(shù):4563
-
選擇網(wǎng)站公司需要考慮哪些因素
日期:2023-05-25 瀏覽次數(shù):3424
-
北京模板建站
日期:2023-03-28 瀏覽次數(shù):3604
-
揭示了頁(yè)面搜索引擎優(yōu)化的神秘面紗
日期:2019-04-04 瀏覽次數(shù):2622
-
開(kāi)發(fā)應(yīng)用程序時(shí)需要考慮的5件事
日期:2019-06-10 瀏覽次數(shù):2098
-
如何改進(jìn)您的網(wǎng)站設(shè)計(jì)工作流程
日期:2019-02-26 瀏覽次數(shù):2270
-
您的網(wǎng)站需要重新設(shè)計(jì)的十個(gè)標(biāo)志
日期:2019-01-17 瀏覽次數(shù):2657
-
網(wǎng)站的響應(yīng)式設(shè)計(jì):一切彈性化
日期:2015-07-23 瀏覽次數(shù):2377