گرد کردن گوشه ها ی div ها به سه روش
ﮔﺮﺩ ﻛﺮﺩﻥ ﮔﻮ ﺷﻪ ﻫﺎﻱ div ﻫﺎ ﺑﻪ ﺳﻪ ﺭﻭﺵ
ﺍﻳﻦ ﺭﻭﺯ ﻫﺎ ﺍﻳﺠﺎﺩ ﺟﻌﺒﻪ ﻫﺎ ﻳﺎ divider (ﺟﺪﺍﻛﻨﻨﺪﻩ ﻫﺎ) ﻳﻲ ﺑﺎ ﮔﻮﺷﻪ ﻫﺎﻱ ﮔﺮﺩ ﺗﻮﻱ ﻃﺮﺍﺣﻲ ﺻﻔﺤﺎﺕ ﻭﺏ ﺧﻴﻠﻲ ﻣﺮﺳﻮﻣﻪ ﻭ ﺯﻳﺒﺎﻳﻲ ﺧﺎﺻﻲ ﺑﻪ ﺻﻔﺤﻪ ﻣﻴﺪﻩ . ﭼﻨﺪﻳﻦ ﺭﺍﻩ ﺑﺮﺍﻱ ﺍﻳﻦ ﻛﺎﺭ ﻭﺟﻮﺩ ﺩﺍﺭﻩ ﻛﻪ ﻗﺒﻼ ﺩﻭﺳﺘﺎﻧﻤﺎﻥ ﺗﻮﻱ ﺍﻳﻦ ﺗﺎﭘﻴﻚ ﺩﺭ ﻣﻮﺭﺩﺵ ﺑﺤﺚ ﻛﺮﺩﻥ ﻭ ﺭﺍﻩ ﻫﺎﻱ ﺧﻮﺑﻲ ﻫﻢ ﭘﻴﺸﻨﻬﺎﺩ ﺷﺪﻩ .ﺍﻣﺎ ﻣﻦ ﻣﻲ ﺧﻮﺍﻡ ﺭﺍﻩ ﻫﺎﻱ ﺳﺎﺩﻩ ﺗﺮﻱ ﺭﻭ ﻫﻢ ﭘﻴﺸﻨﻬﺎﺩ ﻛﻨﻢ . ﺑﺎ ﻫﻢ ﺳﻪ ﺭﻭﺵ ﺍﻳﻦ ﻛﺎﺭ ﺭﻭ ﺑﺮﺭﺳﻲ ﻣﻲ ﻛﻨﻴﻢ :
ﺍﻳﺠﺎﺩ ﺟﻌﺒﻪ ﻫﺎﻱ ﮔﻮﺷﻪ ﮔﺮﺩ ﺑﺎ ﻋﺮﺽ ﻭ ﺍﺭﺗﻔﺎﻉ ﺛﺎﺑﺖ
ﺍﻳﻦ ﺳﺎﺩﻩ ﺗﺮﻳﻦ ﺭﺍﻫﻪ ! ﻣﺎ ﺍﻭﻝ ﺗﺼﻮﻳﺮﻱ ﺑﺎ ﮔﻮﺷﻪ ﻫﺎﻱ ﮔﺮﺩ ﻭ ﺑﺎ ﻋﺮﺽ ﻭ ﺍﺭﺗﻔﺎﻉ ﺛﺎﺑﺖ ﺩﺭﺳﺖ ﻣﻲ ﻛﻨﻴﻢ . ﻭ ﺍﻭﻧﻮ ﺑﻪ ﻋﻨﻮﺍﻥ ﭘﺲ ﺯﻣﻴﻨﻪ ﻳﻪ div ﻗﺮﺍﺭ ﻣﻲ ﺩﻳﻢ . ﻫﻤﭽﻨﻴﻦ ﺑﺎ CSS ، ﻳﻪ padding 4 ﭘﻴﻜﺴﻠﻲ ﻫﻢ ﺑﻪ div ﻣﻮﻥ ﻣﻲ ﺩﻳﻢ ﺗﺎ ﻣﻄﻤﺌﻦ ﺑﺸﻴﻢ ﻛﻪ ﻣﺘﻦ ﺩﺍﺧﻞ ﺍﻭﻥ ﺑﺎ border ﻫﺎﻱ ﻋﻜﺴﻤﻮﻥ ﺗﺪﺍﺧﻞ ﻧﺪﺍﺷﺘﻪ ﺑﺎﺷﻪ .
ﺭﻭﻱ ﻋﻜﺲ ﺯﻳﺮ ﺭﺍﺳﺖ ﻛﻠﻴﻚ ﻛﺮﺩﻩ ﻭ ﺍﻭﻧﻮ ﺫﺧﻴﺮﻩ ﻛﻨﻴﺪ ﺗﺎ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﻢ .
ﺍﻳﻦ ﻫﻢ ﻛﺪ HTML ﻭ CSS ﺵ :
ﮐﺪ HTML:
کد HTML:
<div style="background-image: url('/sites/default/files/rounded_fixed.gif'); width: 228px; height: 160px; padding: 10px;">
Some content. Some content. Some content.
Some content. Some content. Some content.
Some content. Some content. Some content.
</div>
ﺍﻳﻦ ﻫﻢ ﻧﺘﻴﺠﻪ :
ﻧﻜﺘﻪ : ﺍﻳﻦ ﺭﺍﻩ ﺳﺎﺩﻩ ﻭ ﺳﺮﻳﻌﻴﻪ . ﺍﻳﻦ ﺑﺮﺍﻱ ﻭﻗﺘﺎﻳﻲ ﺑﻪ ﻛﺎﺭ ﻣﻲ ﺁﺩ ﻛﻪ ﻣﺤﺘﻮﺍﻱ div ﻣﺎ ﺛﺎﺑﺖ ﺑﺎﺷﻪ ﻭ ﺗﻐﻴﻴﺮ ﻧﻜﻨﻪ . ﺩﺭ ﻏﻴﺮ ﺍﻳﻦ ﺻﻮﺭﺕ ﻣﻤﻜﻨﻪ ﻣﺘﻨﻤﻮﻥ ﺍﺯ div ﻣﻮﻥ ﺑﺰﻧﻪ ﺑﻴﺮﻭﻥ ﻭ ﻛﺎﺭ ﺭﻭ ﺧﺮﺍﺏ ﻛﻨﻪ .
ﺍﻳﺠﺎﺩ ﺟﻌﺒﻪ ﻫﺎﻱ ﮔﻮﺷﻪ ﮔﺮﺩ ﺑﺎ ﻋﺮﺽ ﺛﺎﺑﺖ ﻭ ﺍﺭﺗﻔﺎﻉ ﻣﺘﻐﻴﺮ
ﺗﻮﻱ ﺍﻳﻦ ﺭﻭﺵ ﻣﺎ ﺍﺯ ﺩﻭ ﺗﺎ ﻋﻜﺲ ﺑﺮﺍﻱ ﺑﺎﻻ ﻭ ﭘﺎﻳﻴﻦ ﺟﻌﺒﻪ ﻣﻮﻥ ﺍﺳﺘﻔﺎﻩ ﻣﻲ ﻛﻨﻴﻢ . ﻫﻤﭽﻨﻴﻦ ﺍﺯ ﻳﻪ div ﻛﻪ ﻗﺮﺍﺭﻩ ﻣﺤﺘﻮﻱ ﻣﺘﻦ ﻣﺎ ﺑﺎﺷﻪ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻲ ﻛﻨﻴﻢ . ﺑﺮﺍﻱ ﺍﻳﻦ div ﺍﺯ ﺧﺎﺻﻴﺖ border ﺑﺮﺍﻱ ﻛﺸﻴﺪﻥ ﺧﻄﻮﻁ ﺣﺎﺷﻴﻪ ﭼﭗ ﻭ ﺭﺍﺳﺖ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻲ ﻛﻨﻴﻢ .
ﺩﻭ ﺗﺎ ﻋﻜﺲ ﺯﻳﺮ ﺭﻭ ﺫﺧﻴﺮﻩ ﻛﻨﻴﺪ .
ﻭ
ﺍﻳﻦ ﻫﻢ ﻛﺪ CSS :
ﮐﺪ HTML:
کد HTML:
<div style="width: 248px;">
<div style="background-image: url('/sites/default/files/rounded_top.gif'); height: 20px;"></div>
<div style="border-left: 2px solid #B5B5B5; border-right: 2px solid #B5B5B5; padding: 10px;">
Some content. Some content. Some content.
Some content. Some content. Some content.
Some content. Some content. Some content.
</div>
<div style="background-image: url('/sites/default/files/rounded_bottom.gif'); height: 20px;"></div>
</div>
ﺍﻳﻦ ﻫﻢ ﻧﺘﻴﺠﻪ :
ﺩﻗﺖ ﻛﻨﻴﺪ ﻛﻪ ﻋﺮﺽ ﻭ ﺭﻧﮓ border ﻣﺮﺑﻮﻁ ﺑﻪ div ﻭﺳﻄﻲ ﺭﻭ ﻫﻤﺮﻧﮓ border ﻋﻜﺲ ﻫﺎﻱ ﺑﺎﻻ ﻭ ﭘﺎﻳﻴﻦ ﺍﻧﺘﺨﺎﺏ ﻛﻨﻴﺪ . ﺑﺮﺍﻱ ﺳﺖ ﺷﺪﻥ !!! ﺍﮔﻪ ﺷﻤﺎ ﺍﺯ ﻋﻜﺲ ﻫﺎﻱ ﺩﻳﮕﻪ ﺍﻱ ﺑﺮﺍﻱ ﺑﺎﻻ ﻭ ﭘﺎﻳﻴﻦ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ ﻣﺠﺒﻮﺭﻳﺪ ﺍﺯ ﻛﺪ CSS ﻣﺘﻔﺎﻭﺗﻲ ﺑﺮﺍﻱ div ﻭﺳﻄﻲ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﺪ .
ﺍﻳﻦ ﺭﻭﺵ ﻳﻪ ﻛﻢ ﺍﺯ ﺭﻭﺵ ﻗﺒﻠﻲ ﻛﺎﻣﻞ ﺗﺮﻩ . ﭼﻮﻥ ﻣﺎ ﻣﻲ ﺗﻮﻧﻴﻢ ﺍﺯﺵ ﺑﺮﺍﻱ ﻣﺤﺘﻮﺍﻱ ﻣﺘﻐﻴﺮ ﺍﺳﺘﻔﺎﺩﻩ ﻛﻨﻴﻢ .
ﺍﻳﺠﺎﺩ ﺟﻌﺒﻪ ﻫﺎﻱ ﮔﻮﺷﻪ ﮔﺮﺩ ﺑﺪﻭﻥ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺗﺼﺎﻭﻳﺮ
ﺍﻻﻥ ﻣﻲ ﺧﻮﺍﻡ ﻃﺮﻳﻘﻪ ﺍﻳﺠﺎﺩ ﻫﻤﻮﻥ div ﻫﺎ ﺭﻭ ﺑﺪﻭﻥ ﺍﺳﺘﻔﺎﻩ ﺍﺯ ﺗﺼﺎﻭﻳﺮ ﻭ ﻓﻘﻂ ﺑﻪ ﻛﻤﻚ CSS ﻭ HTML ﺗﻮﺿﻴﺢ ﺑﺪﻡ .
ﻣﺎ ﺍﺯ ﭼﻨﺪ ﺗﺎ div ﻛﻤﻜﻲ ﺑﺮﺍﻱ ﺍﻳﺠﺎﺩ ﮔﻮﺷﻪ ﻫﺎﻱ ﮔﺮﺩ ﺍﺳﺘﻔﺎﺩﻩ ﺧﻮﺍﻫﻴﻢ ﻛﺮﺩ . ﺗﺼﻮﻳﺮ ﺯﻳﺮ ﻣﻮﻗﻌﻴﺖ ﻭ ﻛﺎﺭ ﻫﺮ ﻳﻚ ﺍﺯ ﺍﻭﻥ ﻫﺎ ﺭﻭ ﻧﺸﻮﻥ ﻣﻲ ﺩﻩ .
ﻫﻤﻮﻧﻄﻮﺭ ﻛﻪ ﻣﻲ ﺑﻴﻨﻴﻦ ﺍﻭﻥ ﻗﺴﻤﺖ ﻫﺎﻳﻲ ﺍﺯ ﺟﻌﺒﻪ ﻣﻮﻥ ﻛﻪ ﻗﺮﺍﺭﻩ ﮔﻮﺷﻪ ﻫﺎﻱ ﮔﺮﺩ ﺭﻭ ﺗﺸﻜﻴﻞ ﺑﺪﻥ ﺑﻪ ﭼﻨﺪ ﺧﻂ ﻛﻪ ﻫﺮ ﺧﻂ ﺩﺭ ﻭﺍﻗﻊ ﻳﻪ div ﺑﺎ ﺧﺎﺻﻴﺖ ﻫﺎﻳﻲ ﺍﺯ css ﻫﺴﺖ ﺗﻘﺴﻴﻢ ﺷﺪﻩ . (ﺑﻪ ﺷﺶ ﺧﻂ ﺑﺎﻻ ﻭ ﭘﺎﻳﻴﻦ ﺗﻮﻱ ﺷﻜﻞ ﻧﮕﺎﻩ ﻛﻨﻴﺪ .)
ﻣﺎ ﺍﺯ ﻣﻘﺎﺩﻳﺮ ﻣﺘﻔﺎﻭﺗﻲ ﺑﺮﺍﻱ ﺧﺼﻮﺻﻴﺖ margin ﺑﺮﺍﻱ ﻫﺮ ﺷﺶ div ﺑﻪ ﻣﻨﻈﻮﺭ ﺷﻜﻞ ﺩﺍﺩﻥ ﻭ ﺗﻨﻈﻴﻢ ﭘﻴﭻ ﮔﻮﺷﻪ ﻫﺎ ﺍﺳﺘﻔﺎﺩﻩ ﻣﻲ ﻛﻨﻴﻢ .
ﺧﻂ ﺍﻭﻝ ﻳﻪ div ﻫﺴﺖ ﻛﻪ ﺧﺎﺻﻴﺖ margin-left ﻭ margin-right ﺍﻭﻥ ﺑﺮﺍﺑﺮ 6 ، background-color ﺍﻭﻥ ﺑﺮﺍﺑﺮ black ﻭ height ﺍﻭﻥ ﺑﺮﺍﺑﺮ 1px ﻫﺴﺘﺶ .
ﺧﻂ ﺩﻭﻡ ﻫﻢ ﺑﻪ ﻫﻤﻴﻦ ﺷﻜﻞ ﺍﻣﺎ ﺑﺎ margin ﻛﻤﺘﺮ . ﺑﻘﻴﻪ div ﻫﺎ ﻫﻢ ﺑﻪ ﻫﻤﻴﻦ ﺭﻭﺍﻟﻪ .
ﺍﻳﻦ ﻛﺪ ﻛﺎﻣﻞ ﺭﻭ ﺍﻣﺘﺤﺎﻥ ﻛﻨﻴﺪ ﻭ ﺣﺎﺻﻞ ﺭﻭ ﺑﺒﻴﻨﻴﺪ .
ﮐﺪ HTML:
کد HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.round_corners .line_1,
.round_corners .line_2,
.round_corners .line_3,
.round_corners .line_4,
.round_corners .line_5 {
line-height: 0px;
font-size: 1px;
overflow: hidden;
}
.round_corners .line_1 {
margin-left: 6px;
margin-right: 6px;
background-color: black;
height: 1px;
}
.round_corners .line_2 {
margin-left: 4px;
margin-right: 4px;
border-left: 2px solid black;
border-right: 2px solid black;
height: 1px;
}
.round_corners .line_3 {
margin-left: 3px;
margin-right: 3px;
border-left: 1px solid black;
border-right: 1px solid black;
height: 1px;
}
.round_corners .line_4 {
margin-left: 2px;
margin-right: 2px;
border-left: 1px solid black;
border-right: 1px solid black;
height: 1px;
}
.round_corners .line_5 {
margin-left: 1px;
margin-right: 1px;
border-left: 1px solid black;
border-right: 1px solid black;
height: 2px;
}
.round_corners .content {
border-left: 1px solid black;
border-right: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div class="round_corners">
<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>
<div class="line_4"></div>
<div class="line_5"></div>
<div class="content">Content</div>
<div class="line_5"></div>
<div class="line_4"></div>
<div class="line_3"></div>
<div class="line_2"></div>
<div class="line_1"></div>
</div>
</body>
</html>
ﺷﻤﺎ ﻣﻲ ﺗﻮﻧﻴﺪ ﺑﺎ ﺍﻓﺮﺍﻳﺶ ﺩﺍﺩﻥ ﺗﻌﺪﺍﺩ div ﻫﺎ ﻭ ﻛﻼﺱ ﻫﺎﻱ ﻣﺘﻨﺎﻇﺮﺷﻮﻥ ﻣﻴﺰﺍﻥ ﮔﺮﺩ ﺑﻮﺩﻥ ﮔﻮﺷﻪ ﻫﺎ ﺭﻭ ﻛﻨﺘﺮﻝ ﻛﻨﻴﺪ . ﻳﺎ ﻣﻲ ﺗﻮﻧﻴﺪ ﺑﺎ ﻛﻢ ﻛﺮﺩﻥ ﺗﻌﺪﺍﺩ div ﻫﺎ ﺑﻪ 5 ﻳﺎ ﻛﻤﺘﺮ ﺍﺯ ﺣﺠﻢ ﻛﺪﺗﻮﻥ ﻛﻢ ﻛﻨﻴﺪ .
ﺍﻟﺒﺘﻪ ﺭﻭﺵ ﻫﺎﻳﻲ ﺯﻳﺎﺩﻱ ﺑﺮﺍﻱ ﺍﻳن کار هست که این فقط سه تا از اونا بود.
