問題：如何通過p+css以及定位來實現圓角矩形？

解決方法概述：

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

樣式：在 head 標簽內部設置的css要有的屬性：

1.position：relative；

2.寬和高;

3背景顏色;

4.邊框線（用來調整四個原角的相對位置，調整好后可以將邊框線設置刪除）

在設置小層的css時，每個層里都要有的屬性有：

1.position：absolute；

2.寬和高；

3.方向屬性（left，right，bottom,top）

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

以下是我實現圓角矩形的代碼：

XML/HTML Code復制內容到剪貼板

 !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樣式是內聯式，CSSyangshi_10628_1.html' target='_blank'>CSS樣式有三種：內聯式，嵌入式，外部式。

【相關推薦】

1. HTML免費視頻教程

2. html實現固定表格四周并且可以上下左右滾動

3. 詳解前端開發常用的HTML標簽

4. 通過marquee標簽完成滾動效果的純html代碼

5. 用HTML編寫個人簡歷的代碼實例

以上就是Html實現邊框圓角的實例詳解的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。