這篇文章主要為大家詳細介紹了html輕松實現圓角矩形的方法，告訴大家如何通過div+css以及定位來實現圓角矩形？感興趣的小伙伴們可以參考一下
問題：如何通過div+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>
#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>
<div id=p>
<div id=plefttop></div>
<div id=prighttop></div>
<div id=pleftbottom></div>
<div id=prightbottom></div>
</div>
</body>
</html>
注意：我的代碼里用的css樣式是內聯式，CSS樣式有三種：內聯式，嵌入式，外部式。
以上就是本文的全部內容，希望對大家的學習有所幫助
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
