CSS3 ???
CSS3 Borders
CSS3 Borders
CSS3? ???? Photoshop? ?? ??? ????? ???? ??? ?? ???? ??? ??? ??? ???? ???? ??? ? ????.
? ???? ?? ??? ??? ?? ????.
Border-color(??? ?? ??)
Border-image(???? ?? ???? ??)
Border-radius(??? ??)
box - Shadow (??? ??)
?? ???? ???? ??? IE8, FireFox10.0.9, Chrome 22.0.1229.94, Safari 5.1.7, Opera 12.50???. . . ????? ?? ?????.
????? ??: VS2010 Ultimate Edition ASP.NET
??? div? ???? ???? ?? ?? ??? ??????.
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
}
</style>
</head>
<body>
<div class='border_test'>常用的邊框樣式</div>
</body>
</html>?? ??? ??? ??? ? ??? ? -color? ?????? CSS3? ???? ??? ?????.
??? ??? X? ??? ?? ??? ??? ?????. ?? ?? ? ???? X ??? ??? ? ????. ? ??? ??? 1px???.
(ps: ??? ??? 10px?? 5? ??? ??? ?? ??? ??? ??? ??? ????.)
??? ?????. ???? ?? ??? ?? ??
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
border-color:red blue green black;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-color樣式</div>
</body>
</html>??? ??? ??? ??? ?? ????.
??, ???, ???, ?? 4?? ??? ???? ???? ????.
??, 3?? ??? ???? ?? ??? ??? ???? ?????.
?? ?? ???? ??? ? ?? ??? ??? ????? "??? ? ???? X ??? ??? ? ????." border-color? 4? ??? ??? ?? ???? ?? ???? ?? ?? ????.
?? ??? ???? ??? ? ????. ?? ??? ??.
border-top-colorborder-right-colorborder-bottom-colorborder-left-color
??? ??? ???? ???
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-border-top-colors:Blue Yellow Red Black Green;
-moz-border-bottom-colors:Blue Yellow Red Black Green;
-moz-border-right-colors:Blue Yellow Red Black Green;
-moz-border-left-colors:Blue Yellow Red Black Green;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-color樣式</div>
</body>
</html>?? ???? ? -moz-? ?? ?????? ????. ?????. ??? ???? ?????.
"??"? ?? ??? ???? ?????.
.border_test
{
border:5px solid red;
-moz-border-top-colors:Blue Yellow Red Black Green;
-ms-border-top-colors:Blue Yellow Red Black Green;
-wekit-border-top-colors:Blue Yellow Red Black Green;
-o-border-top-colors:Blue Yellow Red Black Green;
border-top-colors:Blue Yellow Red Black Green;
}??? ??? Firefox??? ???? ?? ??????. ?, border-border-colors ? ??? ? Firefox??? ??? ? ??, ?? ??? ???? ????...
Border-image
border-image? ?? ??? ???? ???? ????. border-image-source? ??? ?? ???? URL? ?????.
border-image-slice? ?? ??? ?? ??? ??? ??? ?? ??? ?????!border-image-width
border-image-repea
??? ???? ?? ??? ?????.
??? ??? ?????.
border-image-source
???? ?? ???? ???? URL???. ?? ??
border-image-source: url(../images/border.gif);
none ?? ??? ? ????. ?, ??? ?? ???
border-image-slice
? ???? ??? ??? ?? ??? ?????. (???? ? ?? ??) ?? ?? ??? ?? 4?? ?? ????. px? ???? ????. ? ?? ?? ???? ??? ???? ? ? ????. ?: border-image-slice:1 2 3 4; ???, ???, ??", ? ?? ???? ?? ???? ????, ??? ??? ??? ??????
border-image-width
??? ???? ??? ?????. ?? ?????? ?????. border-image ?? (??? w3c?? ???? ??? ?? ?????? ??? ??????. ??? ??? ??? border-width? ??? ? ????)
border-image-repeat;
repeat?? ? ?? ? ??? ????
[ ??? | ?? | ??? ]: ??? | ?? | ??(???? ??????.)
<html>
<head>
<style type="text/css">
.border_test
{
-webkit-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-moz-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-o-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-ms-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
display: block;
border-width: 0 12px;
padding: 10px;
text-align: center;
font-size: 16px;
text-decoration: inherit;
color:white;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-image樣式</div>
</body>
</html>Border-radius??? ?? ???, CSS3? ???? ? ?? ?? ??? ???? ?? ?? ???? ?????. ?? ?? ?????.haborder-radius????:Radius, ??? ? ? ????. 0?? ?????.<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-border-radius:15px;
-ms-border-radius:15px;
-wekit-border-radius:15px;
-o-border-radiuss:15px;
border-radius:15px;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-radius樣式</div>
</body>
</html>?? ??? ??? ??? ????? ?????. FireFox, Chrome, Safari, Opera??? ???? ??? ?? ?? ?? ? ??? IE9??? ????? ???. ???? ?? 4.?? ??: border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius??? ??? ?????. ?????. ?, ??? ??? 1/4 ?? ???? ???. 4? ? ??? 0?? ??? ???. ?? ?? ?? ?????.box-shadow
??? ?, ???? ? ?? ?? ?? ??
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-box-shadow:5px 2px 6px black;
-ms-box-shadow:5px 2px 6px black;
-wekit-box-shadow:5px 2px 6px black;
-o-box-shadow:5px 2px 6px black;
box-shadow:5px 2px 6px black;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-shadow樣式</div>
</body>
</html>?
??? ?? ??? ?(?? ? ?? ?? ?? ? ??), ??? ?? ??? ?(?? ? ??? ?? ? ??) ?); ??? ?? ? ;??? ??
? ??? ????? ?? ??? IE?? ?? ?? ?? ?????. ??
CSS3-BORDER? ????. ???? ?? ??? ???? ???? ????? ?? ? ???.
CSS3? ?? ?? ???? ?? ???? ?? ??? ????. ??? ??? ?? ??? ????. .
DEMO? ?????.
