HTML/CSS/Box Model/border
Содержание
- 1 Add border for different columns together
- 2 Body border: 50px #666 ridge
- 3 border: 40px double black; creates a black, 40-pixel, double-line border.
- 4 Border cascade
- 5 Border direction
- 6 border:none is the default.
- 7 border property, can be used to specify border-width, border-style, and border-color for all four sides at once.
- 8 border sets the size, pattern, and color of the border surrounding the padding.
- 9 border shortcut property takes three space-delimited values that represent the border"s width, style, and color.
- 10 Border shortcut setting
- 11 Border"s width cannot be negative because they are inside the margin.
- 12 border: thick solid black
- 13 Border with specific setting for four directions
- 14 Combined style
- 15 Set border to "3px dotted #33333;"
- 16 This paragraph has a 1 pixel thick, solid black border around it.
- 17 Use nested border
Add border for different columns together
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style type="text/css">
#leftcontent {
position: absolute;
left:1%;
width:20%;
top:50px;
background:#eee;
}
#centerleftcontent {
position: absolute;
left:22%;
width:28%;
top:50px;
background:#fff;
}
#centerrightcontent {
position: absolute;
left:51%;
width:28%;
top:50px;
background:#ccc;
}
#rightcontent {
position: absolute;
left:80%;
width:19%;
top:50px;
background:#ddd;
}
#rightcontent, #centerrightcontent, #centerleftcontent, #leftcontent {
border:1px solid #000;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
</style>
</head><body>
<div id="banner"><h1>4 columns, all fluid</div>
<div id="leftcontent">
<h1>leftcontent</h1>
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. </p>
</div>
<div id="centerleftcontent">
<h1>centerleftcontent</h1>
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
</div>
<div id="centerrightcontent">
<h1>centerrightcontent</h1>
<p>this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. </p>
</div>
<div id="rightcontent">
<h1>rightcontent</h1>
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
</div>
</body>
</html>
Body border: 50px #666 ridge
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 1.5em;
border: 50px #666 ridge;
}
</style>
</head>
<body>
<h2>H</h2>
<h2>N</h2>
<h2>V</h2>
<p>Text Text</p>
</body>
</html>
border: 40px double black; creates a black, 40-pixel, double-line border.
<html>
<head>
<title></title>
<style type="text/css">
#navigation {
border: 40px double black;
}
</style>
</head>
<body>
<ul id="navigation">
<li class="warning"><a href="http://www.wbex.ru">A</a></li>
<li><a href="http://www.wbex.ru">B</a></li>
<li><a href="http://www.wbex.ru">C</a></li>
</ul>
</body>
</html>
Border cascade
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Property Inheritance </title>
<style type="text/css">
ul li {
border: thin solid black;
}
li#navigation {
border: thick solid black;
}
</style>
</head>
<body>
<ul>
<li> This list item has a thin border around it. </li>
<li id="navigation"> This list item has a thick border around it. </li>
</ul>
</body>
</html>
Border direction
<!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" xml:lang="en">
<head>
<title></title>
<style>
h1 {
border-style: solid;
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thick;
border-left-width: 25px;
border-right-color: #ffcc33;
border-top-color: #33ff33;
}
</style>
</head>
<body>
<h1>header 1</h1>
<p>Do you now?</p>
<p><blockquote>block quote.</blockquote></p>
<p>Did you now?</p>
</body>
</html>
border:none is the default.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container{
position: relative;
width: 800px;
height: 800px;
background: pink;
}
* .box {
float: right;
overflow: auto;
visibility: visible;
width: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .small {
position: absolute;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</body>
</html>
border property, can be used to specify border-width, border-style, and border-color for all four sides at once.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>border</title>
<style rel="stylesheet" type="text/css">
div#shorthand {
border: 1px solid crimson;
padding: 5px;
}
</style>
</head>
<body>
<div id="shorthand">
border
</div>
</body>
</html>
border sets the size, pattern, and color of the border surrounding the padding.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .box {
display: static;
overflow: visible;
visibility: visible;
width: 160px;
height: 150px;
padding: 30px;
border-top: 30px solid gray;
border-bottom: 30px solid black;
border-left: 30px solid gray;
border-right: 30px solid black;
margin-left: 230px;
margin-top: 80px;
background-color: #ccc;
}
</style>
</head>
<body>
<h1>Box Model</h1>
<div class="box"></div>
</body>
</html>
border shortcut property takes three space-delimited values that represent the border"s width, style, and color.
<html>
<head>
<title></title>
<style type="text/css">
#navigation {
border: 40px double black;
}
</style>
</head>
<body>
<ul id="navigation">
<li class="warning"><a href="http://www.wbex.ru">Apples</a></li>
<li><a href="http://www.wbex.ru">Bananas</a></li>
<li><a href="http://www.wbex.ru">Cherries</a></li>
</ul>
</body>
</html>
Border shortcut setting
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
border-top, border-right, border-bottom, border-left, border
</title>
<style rel="stylesheet" type="text/css">
div {
margin: 5px;
float: left;
width: 56px;
height: 56px;
}
div#border {
border: 1px dashed darkkhaki;
}
</style>
</head>
<body>
<div id="border"></div>
</body>
</html>
Border"s width cannot be negative because they are inside the margin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container{
position: relative;
width: 800px;
height: 800px;
background: pink;
}
* .box {
float: right;
overflow: auto;
visibility: visible;
width: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .small {
position: absolute;
border: -10px dotted black;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</body>
</html>
border: thick solid black
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div style="border: thick solid black;">
border-width: thick;
</div>
</body>
</html>
Border with specific setting for four directions
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
border-top, border-right, border-bottom, border-left, border
</title>
<style rel="stylesheet" type="text/css">
div {
margin: 5px;
float: left;
width: 56px;
height: 56px;
}
div#properties {
border-top: 1px solid darkkhaki;
border-right: 1px dashed darkkhaki;
border-bottom: 1px solid darkkhaki;
border-left: 1px dashed darkkhaki;
background: lightyellow;
}
</style>
</head>
<body>
<div id="properties"></div>
</body>
</html>
Combined style
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Borders</title>
<style type = "text/css">
div { text-align: center;
margin-bottom: 1em;
padding: .5em }
.thick { border-width: thick }
.medium { border-width: medium }
.thin { border-width: thin }
.groove { border-style: groove }
.inset { border-style: inset }
.outset { border-style: outset }
.red { border-color: red }
.blue { border-color: blue }
</style>
</head>
<body>
<div class = "thick groove">this is a test. </div>
<div class = "medium groove">this is a test. </div>
<div class = "thin groove">this is a test. </div>
<p class = "thin red inset">this is a test. </p>
<p class = "medium blue outset">this is a test. </p>
</body>
</html>
Set border to "3px dotted #33333;"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h2 {
border: 3px dotted #33333;
}
p {
margin: 0;
padding: 10px 0 0 0;
}
</style>
</head>
<body>
<h2>Designing Instant Gratification</h2>
<p>This is a test.</p>
</body>
</html>
This paragraph has a 1 pixel thick, solid black border around it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
border: 1px solid black;
}
</style>
</head>
<body>
<p>
This is a test.
</p>
</body>
</html>
Use nested border
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Telling Real from Counterfeit</title>
<style type="text/css">
body {
margin: 3.5%;
color: #030;
background: #ffc;
font-family: Verdana, Arial, sans-serif;
font-size: 1.05em;
}
body div {
border-style: groove;
border-width: 8px;
border-color: green;
}
body div div {
margin: 0.25em;
padding: 0 1em 0.5em;
border-style: double;
border-width: 8px;
border-color: olive;
background: transparent;
}
h1 {
color: green;
background-color: #ffc;
font-family: Verdana, Arial, sans-serif;
font-size: 1.75em;
text-align: center;
border-top: 0;
}
h2 {
color: #606;
background: #ffc;
font-family: Arial, sans-serif;
}
address {
font-family: Garamond, serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<div>
<h1>Header</h1>
<hr>
<address>
A<br>
E-Mail: <a href="mailto:a@m.ru">a@m.ru</a><br>
Web Address: <a href="">http://www.m.ru</a>
</address>
</div>
</div>
</body>
</html>