問(wèn)題：如何通過(guò)p+css以及定位來(lái)實(shí)現(xiàn)圓角矩形？

解決方法概述：

內(nèi)容：首先在 body 標(biāo)簽內(nèi)部里添加一個(gè)大層（大層用來(lái)固定整體大框架），然后大層內(nèi)包含四個(gè)小層（四個(gè)小層里分別放四個(gè)圓角（事先用ps做好橢圓形形狀，然后用切片工具切圖 ））

樣式：在 head 標(biāo)簽內(nèi)部設(shè)置的css要有的屬性：

1.position：relative；

2.寬和高;

3背景顏色;

4.邊框線（用來(lái)調(diào)整四個(gè)原角的相對(duì)位置，調(diào)整好后可以將邊框線設(shè)置刪除）

在設(shè)置小層的css時(shí)，每個(gè)層里都要有的屬性有：

1.position：absolute；

2.寬和高；

3.方向?qū)傩裕╨eft，right，bottom,top）

4.background：url（ ）no-repeat;(引入各個(gè)方向的圓角圖片)

以下是我實(shí)現(xiàn)圓角矩形的代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

 !doctype html  html lang= en  head  meta charset= UTF-8  meta name= Generator content= EditPlus?  meta name= Author content=  meta name= Keywords content=  meta name= Description content=  title 圓角制作 /title  style type=text/css  position:relative; width:400px; height:200px; background:black; margin:auto; #plefttop position:absolute; width:50px; height:50px; background:url( images/11.jpg ) no-repeat; #prighttop position:absolute; width:50px; height:50px; right:-9px; top:0px; background:url( images/22.jpg ) no-repeat; #pleftbottom position:absolute; width:50px; height:50px; left:0px; bottom:-14px; background:url( images/33.jpg ) no-repeat; #prightbottom position:absolute; width:50px; height:50px; right:-9px; bottom:-14px; background:url( images/44.jpg ) no-repeat; /style  /head  body  p id=p  p id=plefttop /p  p id=prighttop /p  p id=pleftbottom /p  p id=prightbottom /p  /body  /html 

注意：我的代碼里用的css樣式是內(nèi)聯(lián)式，CSSyangshi_10628_1.html' target='_blank'>CSS樣式有三種：內(nèi)聯(lián)式，嵌入式，外部式。

【相關(guān)推薦】

1. HTML免費(fèi)視頻教程

2. html實(shí)現(xiàn)固定表格四周并且可以上下左右滾動(dòng)

3. 詳解前端開(kāi)發(fā)常用的HTML標(biāo)簽

4. 通過(guò)marquee標(biāo)簽完成滾動(dòng)效果的純html代碼

5. 用HTML編寫(xiě)個(gè)人簡(jiǎn)歷的代碼實(shí)例

以上就是Html實(shí)現(xiàn)邊框圓角的實(shí)例詳解的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。