http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FBox_Model%2Fborder
HTML/CSS/Box Model/border - История изменений
2026-04-05T03:14:33Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Box_Model/border&diff=5300&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Box_Model/border&diff=5301&oldid=prev
Admin: 1 версия
2010-05-26T08:16:45Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Add border for different columns together==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"><br />
<html><head><title></title><br />
<style type="text/css"><br />
#leftcontent {<br />
position: absolute;<br />
left:1%;<br />
width:20%;<br />
top:50px;<br />
background:#eee;<br />
}<br />
#centerleftcontent {<br />
position: absolute;<br />
left:22%;<br />
width:28%;<br />
top:50px;<br />
background:#fff;<br />
}<br />
#centerrightcontent {<br />
position: absolute;<br />
left:51%;<br />
width:28%;<br />
top:50px;<br />
background:#ccc;<br />
}<br />
#rightcontent {<br />
position: absolute;<br />
left:80%;<br />
width:19%;<br />
top:50px;<br />
background:#ddd;<br />
}<br />
<br />
#rightcontent, #centerrightcontent, #centerleftcontent, #leftcontent {<br />
border:1px solid #000;<br />
}<br />
<br />
p,h1,pre {<br />
margin:0px 10px 10px 10px;<br />
}<br />
<br />
<br />
<br />
</style><br />
</head><body><br />
<div id="banner"><h1>4 columns, all fluid</div><br />
<div id="leftcontent"><br />
<h1>leftcontent</h1><br />
<p>this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. </p><br />
</div><br />
<div id="centerleftcontent"><br />
<h1>centerleftcontent</h1><br />
<p>this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. </p><br />
</div><br />
<div id="centerrightcontent"><br />
<h1>centerrightcontent</h1><br />
<p>this is a test. this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. </p><br />
</div><br />
<div id="rightcontent"><br />
<h1>rightcontent</h1><br />
<p>this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. </p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Body border: 50px #666 ridge==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
body {<br />
margin: 0;<br />
padding: 1.5em;<br />
border: 50px #666 ridge;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>H</h2> <br />
<h2>N</h2> <br />
<h2>V</h2> <br />
<p>Text Text</p><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==border: 40px double black; creates a black, 40-pixel, double-line border.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#navigation {<br />
border: 40px double black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul id="navigation"><br />
<li class="warning"><a href="http://www.wbex.ru">A</a></li><br />
<li><a href="http://www.wbex.ru">B</a></li><br />
<li><a href="http://www.wbex.ru">C</a></li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Border cascade==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title> Property Inheritance </title><br />
<style type="text/css"><br />
ul li {<br />
border: thin solid black;<br />
}<br />
li#navigation {<br />
border: thick solid black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li> This list item has a thin border around it. </li><br />
<li id="navigation"> This list item has a thick border around it. </li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Border direction==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"<br />
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title></title><br />
<style><br />
h1 {<br />
border-style: solid;<br />
border-top-width: thin;<br />
border-right-width: medium;<br />
border-bottom-width: thick;<br />
border-left-width: 25px;<br />
border-right-color: #ffcc33;<br />
border-top-color: #33ff33;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<h1>header 1</h1><br />
<p>Do you now?</p><br />
<p><blockquote>block quote.</blockquote></p><br />
<p>Did you now?</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==border:none is the default.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
.container{<br />
position: relative;<br />
width: 800px;<br />
height: 800px;<br />
background: pink;<br />
}<br />
* .box {<br />
float: right;<br />
overflow: auto;<br />
visibility: visible;<br />
width: auto;<br />
height: 100px;<br />
margin: 10px;<br />
padding: 10px;<br />
background: red;<br />
}<br />
* .small {<br />
position: absolute;<br />
background: yellow; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="container"> <br />
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div> <br />
<div class="box">this is a test</div> <br />
</div> <br />
</body><br />
</html> <br />
</source><br />
<br />
<br />
<br />
<br />
==border property, can be used to specify border-width, border-style, and border-color for all four sides at once.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>border</title><br />
<style rel="stylesheet" type="text/css"><br />
div#shorthand {<br />
border: 1px solid crimson;<br />
padding: 5px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="shorthand"><br />
border<br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==border sets the size, pattern, and color of the border surrounding the padding.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
* .box {<br />
display: static;<br />
overflow: visible;<br />
visibility: visible;<br />
width: 160px;<br />
height: 150px;<br />
padding: 30px;<br />
border-top: 30px solid gray;<br />
border-bottom: 30px solid black;<br />
border-left: 30px solid gray;<br />
border-right: 30px solid black;<br />
margin-left: 230px;<br />
margin-top: 80px;<br />
background-color: #ccc;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<h1>Box Model</h1> <br />
<div class="box"></div> <br />
</body> <br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==border shortcut property takes three space-delimited values that represent the border"s width, style, and color. ==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#navigation {<br />
border: 40px double black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul id="navigation"><br />
<li class="warning"><a href="http://www.wbex.ru">Apples</a></li><br />
<li><a href="http://www.wbex.ru">Bananas</a></li><br />
<li><a href="http://www.wbex.ru">Cherries</a></li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Border shortcut setting==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title><br />
border-top, border-right, border-bottom, border-left, border<br />
</title><br />
<style rel="stylesheet" type="text/css"><br />
div {<br />
margin: 5px;<br />
float: left;<br />
width: 56px;<br />
height: 56px;<br />
}<br />
div#border {<br />
border: 1px dashed darkkhaki;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="border"></div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Border"s width cannot be negative because they are inside the margin.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
.container{<br />
position: relative;<br />
width: 800px;<br />
height: 800px;<br />
background: pink;<br />
}<br />
* .box {<br />
float: right;<br />
overflow: auto;<br />
visibility: visible;<br />
width: auto;<br />
height: 100px;<br />
margin: 10px;<br />
padding: 10px;<br />
background: red;<br />
}<br />
* .small {<br />
position: absolute;<br />
border: -10px dotted black;<br />
background: yellow; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="container"> <br />
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div> <br />
<div class="box">this is a test</div> <br />
</div> <br />
</body><br />
</html> <br />
</source><br />
<br />
<br />
<br />
<br />
==border: thick solid black==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
div {<br />
padding: 10px;<br />
margin: 10px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div style="border: thick solid black;"><br />
border-width: thick;<br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Border with specific setting for four directions==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title><br />
border-top, border-right, border-bottom, border-left, border<br />
</title><br />
<style rel="stylesheet" type="text/css"><br />
div {<br />
margin: 5px;<br />
float: left;<br />
width: 56px;<br />
height: 56px;<br />
}<br />
div#properties {<br />
border-top: 1px solid darkkhaki;<br />
border-right: 1px dashed darkkhaki;<br />
border-bottom: 1px solid darkkhaki;<br />
border-left: 1px dashed darkkhaki;<br />
background: lightyellow;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="properties"></div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Combined style==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version = "1.0"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Borders</title><br />
<style type = "text/css"><br />
div { text-align: center;<br />
margin-bottom: 1em;<br />
padding: .5em }<br />
.thick { border-width: thick }<br />
<br />
.medium { border-width: medium }<br />
.thin { border-width: thin }<br />
.groove { border-style: groove }<br />
.inset { border-style: inset }<br />
.outset { border-style: outset }<br />
.red { border-color: red }<br />
.blue { border-color: blue }<br />
</style><br />
</head><br />
<body><br />
<div class = "thick groove">this is a test. </div><br />
<div class = "medium groove">this is a test. </div><br />
<div class = "thin groove">this is a test. </div><br />
<p class = "thin red inset">this is a test. </p><br />
<p class = "medium blue outset">this is a test. </p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set border to "3px dotted #33333;"==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
h2 {<br />
border: 3px dotted #33333;<br />
}<br />
p {<br />
margin: 0;<br />
padding: 10px 0 0 0;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>Designing Instant Gratification</h2><br />
<p>This is a test.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==This paragraph has a 1 pixel thick, solid black border around it.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p {<br />
border: 1px solid black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
This is a test. <br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Use nested border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br />
<html><br />
<head><br />
<title>Telling Real from Counterfeit</title><br />
<style type="text/css"><br />
body {<br />
margin: 3.5%;<br />
color: #030;<br />
background: #ffc;<br />
font-family: Verdana, Arial, sans-serif;<br />
font-size: 1.05em;<br />
}<br />
body div {<br />
border-style: groove;<br />
border-width: 8px;<br />
border-color: green;<br />
}<br />
body div div {<br />
margin: 0.25em;<br />
padding: 0 1em 0.5em;<br />
border-style: double;<br />
border-width: 8px;<br />
border-color: olive;<br />
background: transparent;<br />
}<br />
h1 {<br />
color: green;<br />
background-color: #ffc;<br />
font-family: Verdana, Arial, sans-serif;<br />
font-size: 1.75em;<br />
text-align: center;<br />
border-top: 0;<br />
}<br />
h2 {<br />
color: #606;<br />
background: #ffc;<br />
font-family: Arial, sans-serif;<br />
}<br />
address {<br />
font-family: Garamond, serif;<br />
text-align: center;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<div><br />
<h1>Header</h1><br />
<hr><br />
<address><br />
A<br><br />
E-Mail: <a href="mailto:a@m.ru">a@m.ru</a><br><br />
Web Address: <a href="">http://www.m.ru</a><br />
</address><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source></div>
Admin