這篇文章主要為大家詳細介紹Html輕鬆實現圓角矩形範例的方法,告訴大家如何透過p+css以及定位來實現圓角矩形?有興趣的小夥伴可以參考一下
問題:如何透過p+css以及定位來實現圓角矩形?
解決方法概述:
內容:首先在6c04bd5ca3fcae76e30b72ad730ca86d標籤內部加入一個大層次(大層次用來固定整體大框架),接著大層次內包含四個小層(四個小層裡分別放四個圓角(事先用ps做好橢圓形形狀,然後用切片工具切圖))
樣式:在8cea2e99ba256aa9b779f5ab5949ca21標籤內部設定的css要有的屬性:
1.position# :relative;
2.寬和高;
3背景顏色;
4.邊框線(用來調整四個原角的相對位置,調整好後邊框線設定可以刪除)
在設定小層的css時,每層都要有的屬性有:
1.position:absolute;
2.寬與高;
3.方向屬性(left,right,bottom,top)
4.background:url("")no-repeat;(引入各個方向的圓角圖片)
以下是我實現圓角矩形的程式碼:
!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> #p { 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> </p> </body> </html>
注意:我的程式碼裡用的css樣式是內聯式,CSS樣式有三種:內聯式,嵌入式,外部式。
以上是Html輕鬆實現圓角矩形範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!