HTML5+CSS3圓角邊框的繪制_第1頁
HTML5+CSS3圓角邊框的繪制_第2頁
HTML5+CSS3圓角邊框的繪制_第3頁
HTML5+CSS3圓角邊框的繪制_第4頁
HTML5+CSS3圓角邊框的繪制_第5頁
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

HTML5+CSS3圓角邊框的繪制在CSS3中，使用CSS樣式完成圓角邊框繪制，是經(jīng)常用來美化頁面效果的手法之一。1.border-radius屬性在CSS3中，border-radius屬性用于指定圓角的半徑，來完成圓角半徑的繪制。示例：17-4BorderRadius.html<!DOCTYPEHTML><html><head><metacharset="utf-8"><title>繪制圓角邊框</title><styletype="text/css">div{border-radius:25px;background-color:#E4E4E4;border:solid5pxred;padding:20px;font-size:24px;color:#000000;moz-border-radius:20px;o-border-radius:20px;webkit-border-radius:20px;width:300px;height:123px;}</style></head><body><div> “月上柳梢頭，人約黃昏后”，中秋無依之日，世道滄桑，情去節(jié)依在，人靠月圓瘦。思念的中秋，總?cè)吮陡谐良藕颓逵摹?lt;/div></body></html>在上述代碼中，使用border-radius屬性繪制DIV層的邊框，設(shè)置圓角半徑為25像素。

2.在border-radius屬性中指定兩個半徑在使用border-radius屬性繪制圓角邊框時，可以指定兩個半徑，語法如下：border-radius:25Px15px;在這種情況下繪制圓角邊框時，各瀏覽器的處理方式不同。例如，在Chrome瀏覽器中繪制圓角邊框時，第一半徑為水平方向半徑，第二半徑為垂直方向半徑。在Opera瀏覽器中，將第一半徑作為邊框左上角與右下角的圓角半徑來繪制，將第二個半徑作為邊框右上角與左下角的圓角半徑來繪制。下列代碼與示例17-4中的代碼部分相同，樣式修改代碼如下：示例：17-5BorderRadius1.html<styletype="text/css">div{border-radius:60Px15px;background-color:#E4E4E4;border:solid5pxred;padding:20px;font-size:24px;color:#000000;moz-border-radius:20px;o-border-radius:20px;webkit-border-radius:20px;width:300px;height:123px;}</style>在上述代碼中，使用border-radius屬性繪制DIV層的邊框，分別設(shè)置圓角半徑為60像素和15像素，邊框顏色為紅色。在Opera游覽器中效果如下:設(shè)置圓角半徑

為像素“設(shè)置圓角半徑

為像素“月上柳梢頭，人約葡后”，中秋無依之日，世L!繪制圓角邊框.,Q< |9 _Ilocalhost/E:/wangxiaobo/HThI[&▼^fflGoogle滄桑：情去節(jié)依在，人靠月圓瘦。思念的中秋，總?cè)吮对O(shè)置圓角半徑

為像素?；?00%)3．設(shè)置邊框為不顯示在使用border-radius屬性繪制圓角邊框時，可以使用border屬性的none值將邊框設(shè)置為不顯示。示例：17-6BorderRadius2.html<!DOCTYPEHTML><html><head><metacharset="utf-8"><title>繪制圓角邊框</title><styletype="text/css">div{border-radius:15Px60Px;background-color:#E4E4E4;border:none;padding:20px;font-size:24px;color:#000000;moz-border-radius:20px;o-border-radius:20px;webkit-border-radius:20px;width:300px;height:123px;</style></head><body><div> “月上柳梢頭，人約黃昏后”，中秋無依之日，世道滄桑，情去節(jié)依在，人靠月圓瘦。思念的中秋，總?cè)吮陡谐良藕颓逵摹?lt;/div><br>

</body></html>在上述代碼中，設(shè)置</body></html>在上述代碼中，設(shè)置div層背景顏色為"#E4E4E4”，寬度為300像素，高度為123像素。0 ]■123像素。0 ]■本地|localhost/EJwangxiaobo/HTK★|| ▼l^^GooglW,。滄桑，情去節(jié)依在，人靠月圓瘦。思念的中秋，總?cè)吮陡谐良藕颓逵?。k “月上柳梢頭，人約黃昏M〃窖黃福才日彳后”，中秋無依之日，世道設(shè)置邊框不顯示2州咽角邊框4．繪制四個角不同半徑的圓角邊框在繪制圓角邊框時，如果圓角邊框的四個圓角半徑各不相同，可以使用下列屬性進(jìn)行設(shè)置。 名稱 解釋 border-top-left-radius 指定左上角半徑。border-top-right-radius 指定右上角半徑。border-bottom-left-radius 指定左下角半徑。border-bottom-right-radius 指定右下角半徑。示例：17-7BorderRadius3.html<!DOCTYPEHTML><html><head><metacharset="utf-8"><title>繪制圓角邊框</title><styletype="text/css">div{border-radius:15Px60px;border-bottom-left-radius:80px;border-bottom-right-radius:60px;border-top-left-radius:30px;border-top-right-radius:5px;background-color:#E4E4E4;border:solid5pxred;padding:20px;font-size:24px;color:#000000;moz-border-radius:20px;o-border-radius:20px;webkit-border-radius:20px;width:300px;height:123px;</style></head><body><div>“月上柳梢頭，人約黃昏后”，中秋無依之日，世道滄桑，情去節(jié)依在，人靠月圓瘦。思念的中秋，總?cè)吮陡谐良藕颓逵摹?lt;/div></body></html>在上述代碼中，設(shè)置左上角的半徑為30像素，設(shè)置左下角的半

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論