⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 pr_border-style.asp

📁 W3Schools tutorial..web designing
💻 ASP
字号:
🔍 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Border-style Property</title>
 
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="xml,tutorial,html,dhtml,css,xsl,xhtml,javascript,asp,ado,vbscript,dom,sql,colors,soap,php,authoring,programming,training,learning,beginner's guide,primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic html,internet,database,development,Web building,Webmaster,html guide" />

<meta name="Description" content="Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ASP ADO PHP SQL tutorials, references, examples for web building." />

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />

<link rel="stylesheet" type="text/css" href="../stdtheme.css" />

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "../../https@ssl./default.htm" : "../../www./default.htm");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>

</head>
<body>

<a name="top"></a>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#808080">
<tr>
<td width="234" valign="top">
<a href="../default.htm"><img src="../images/w3default80.jpg" border="0" alt="W3Schools" /></a>
</td>
<th valign="middle" align="left" class="right">
<iframe style="background-color:#808080" src="../banners/bannerframe.asp@adpartner=aspall2" height="90" width="728"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>

<br /></th>
</tr>
</table>

<table style="margin-left:1px" width="800px" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="137" class="content" valign="top"><br />
<a class="left" href="../default.asp" target="_top">
<img src="../images/homeicon.gif" border="0" alt="home" /></a>
<a class="left" href="../default.asp" target="_top">
<b>HOME</b></a>
<br /><br />
<b>CSS Basic</b><br />
<a class="left" target="_top" href="default.asp" >CSS HOME</a><br />
<a class="left" target="_top" href="css_intro.asp" >CSS Introduction</a><br />
<a class="left" target="_top" href="css_syntax.asp" >CSS Syntax</a><br />
<a class="left" target="_top" href="css_howto.asp" >CSS How To</a><br />
<a class="left" target="_top" href="css_background.asp" >CSS Background</a><br />
<a class="left" target="_top" href="css_text.asp" >CSS Text</a><br />
<a class="left" target="_top" href="css_font.asp" >CSS Font</a><br />
<a class="left" target="_top" href="css_border.asp" >CSS Border</a><br />
<a class="left" target="_top" href="css_outline.asp" >CSS Outline</a><br />
<a class="left" target="_top" href="css_margin.asp" >CSS Margin</a><br />
<a class="left" target="_top" href="css_padding.asp" >CSS Padding</a><br />
<a class="left" target="_top" href="css_list.asp" >CSS List</a><br />
<a class="left" target="_top" href="css_table.asp" >CSS Table</a><br />
<br />
<b>CSS Advanced</b><br />
<a class="left" target="_top" href="css_dimension.asp" >CSS Dimension</a><br />
<a class="left" target="_top" href="css_classification.asp" >CSS Classification</a><br />
<a class="left" target="_top" href="css_positioning.asp" >CSS Positioning</a><br />
<a class="left" target="_top" href="css_pseudo_classes.asp" >CSS Pseudo-class</a><br />
<a class="left" target="_top" href="css_pseudo_elements.asp" >CSS Pseudo-element</a><br />
<a class="left" target="_top" href="css_image_gallery.asp" >CSS Image Gallery</a><br />
<a class="left" target="_top" href="css_image_transparency.asp" >CSS Image Opacity</a><br />
<a class="left" target="_top" href="css_mediatypes.asp" >CSS Media Types</a><br />
<a class="left" target="_top" href="css_dont.asp" >CSS Don't</a><br />
<a class="left" target="_top" href="css_summary.asp" >CSS Summary</a><br />
<br />
<b>CSS Examples</b><br />
<a class="left" target="_top" href="css_examples.asp" >CSS Examples</a><br />
<br />
<b>References</b>
<br />
<a class="left" target="_top" href="css_reference.asp" >CSS2 Reference</a><br />
<a class="left" target="_top" href="css_ref_print.asp" >CSS2 Print</a><br />
<a class="left" target="_top" href="css_ref_aural.asp" >CSS2 Aural</a><br />
<a class="left" target="_top" href="css_units.asp" >CSS Units</a><br />
<a class="left" target="_top" href="css_colors.asp" >CSS Colors</a><br />
<a class="left" target="_top" href="css_colorsfull.asp" >CSS Colorvalues</a><br />
<a class="left" target="_top" href="css_colornames.asp" >CSS Colornames</a><br />
<br />
<b>CSS Quiz</b><br />
<a class="left" target="_top" href="css_quiz.asp" >CSS Quiz</a><br />
<a class="left" target="_top" href="css_exam.asp" >CSS Exam</a><br />


<br />
<b>Selected Reading</b><br />
<a class="left" target="_top" href="../browsers/browsers_stats.asp">Web Statistics</a><br />
<a class="left" target="_top" href="../site/site_glossary.asp">Web Glossary</a><br />
<a class="left" target="_top" href="../hosting/default.asp">Web Hosting</a><br />
<a class="left" target="_top" href="../quality/default.asp">Web Quality</a><br /><br />
<a class="left" target="_top" href="../forum/default.asp">W3Schools Forum</a><br /><br />
<a class="left" target="_top" href="../about/about_helping.asp">Helping W3Schools</a><br /><br />
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*LeftLinkUnit*/
google_ad_slot = "4854527104";
google_ad_width = 120;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
<td valign="top">
<table style="border: 1px solid gray" width="100%" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>


<h1>CSS border-style Property</h1>
<hr />
<a href="css_reference.asp"><img class="navup" src="../images/up.gif" alt="CSS Reference" border="0" /> Complete CSS Reference</a>
<hr />

<h2>Definition</h2>

<p>The border-style property sets the style of the four borders, can have from one to four styles.</p>

<p><b>Inherited:</b>  No</p>

<hr />

<h2><b>JavaScript Syntax</b></h2>
<p>CSS properties can also be dynamically changed with a JavaScript.</p>

<p><b>Scripting Syntax:</b>  <i>object</i>.style.borderStyle=&quot;dotted double&quot;</p>
<p>In our HTML DOM tutorial you can find more details about the
<a href="../htmldom/prop_style_borderstyle.asp">borderStyle property</a>.</p>
<p>In our HTML DOM tutorial you can also find a full
<a href="../htmldom/dom_obj_style.asp">Style Object Reference</a>.</p>
<hr />

<h2>Example</h2>

<table class="ex" cellspacing="0" border="1" width="100%" cellpadding="3">
<tr>
	<td valign="top">
    table {border-style: dotted}<br />
      all four borders will be dotted<p>table {border-style: dotted dashed}<br />
    top and bottom border will be dotted, left an right border will be dashed&nbsp;</p>
    <p>table {border-style: dotted dashed solid}<br />
    top border will be dotted, left and
      right border will be dashed, bottom border will be solid</p>
    <p>table {border-style: dotted dashed solid double}<br />
      top border will be dotted,
      right border will be dashed, bottom border will be solid, left border
      will be double</p>
	</td>
</tr>
</table>
<h2>Possible Values</h2>

<table cellpadding="3" width="100%" class="ex" cellspacing="0" border="1">
  <tr>
    <th align="left" valign="top">Value</th>
    <th align="left" valign="top">Description</th>
  </tr>  
    <tr>
      <td valign="top">none</td>
      <td valign="top">Defines no border</td>
    </tr>
    <tr>
      <td valign="top">hidden</td>
      <td valign="top">The same as &quot;none&quot;, except in border conflict
        resolution for table elements</td>
    </tr>
    <tr>
      <td valign="top">dotted</td>
      <td valign="top">Defines a dotted border</td>
    </tr>
    <tr>
      <td valign="top">dashed</td>
      <td valign="top">Defines a dashed border</td>
    </tr>
    <tr>
      <td valign="top">solid</td>
      <td valign="top">Defines a solid border</td>
    </tr>
    <tr>
      <td valign="top">double</td>
      <td valign="top">Defines two borders. The width of the two borders are the
        same as the border-width value</td>
    </tr>
    <tr>
      <td valign="top">groove</td>
      <td valign="top">Defines a 3D grooved border. The effect depends on the
        border-color value</td>
    </tr>
    <tr>
      <td valign="top">ridge</td>
      <td valign="top">Defines a 3D ridged border. The effect depends on the
        border-color value</td>
    </tr>
    <tr>
      <td valign="top">inset</td>
      <td valign="top">Defines a 3D inset border. The effect depends on the
        border-color value</td>
    </tr>
    <tr>
      <td valign="top">outset</td>
      <td valign="top">Defines a 3D outset border. The effect depends on the
        border-color value</td>
    </tr>
</table>
<br />

<hr />
<h2>Try-It-Yourself Demos</h2>

<p><a target="_blank" href="tryit.asp@filename=trycss_border-style">Set the style of the four
borders</a><br />
This example demonstrates how to set the style of the four borders.</p>

<p><a target="_blank" href="tryit.asp@filename=trycss_border-style2">Set different borders on
each side</a><br />
This example demonstrates how to set different borders on each side of the
element.</p>

<p><a target="_blank" href="tryit.asp@filename=trycss_border-color">Set the color of the four
borders</a><br />
This example demonstrates how to set the color of the four borders. It can have 
from one to four colors.</p>

<p><a target="_blank" href="tryit.asp@filename=trycss_border-bottom-width">Set the width of the
bottom border</a><br />
This example demonstrates how to set the width of the bottom border.</p>

<p><a target="_blank" href="tryit.asp@filename=trycss_border-left-width">Set the width of the
left border</a><br />
This example demonstrates how to set the width of the left border.</p>

<p><a target="_blank" href="tryit.asp@filename=trycss_border-right-width">Set the width of the
right border</a><br />
This example demonstrates how to set the width of the right border.</p>

<p><a target="_blank" href="tryit.asp@filename=trycss_border-top-width">Set the width of the top
border</a><br />
This example demonstrates how to set the width of the top border.</p>

<p><a target="_blank" href="tryit.asp@filename=trycss_border-width">All the width border
properties in one declaration</a><br />
This example demonstrates a shorthand property for setting the width of the four
borders in one declaration, can have from one to four values.</p>

<hr />
<a href="css_reference.asp"><img class="navup" src="../images/up.gif" alt="CSS Reference" border="0" /> Complete CSS Reference</a>

<br />
<hr />

<!-- **** SPOTLIGHTS 1 **** -->

<iframe src="../banners/aspallframe.asp" height="110" width="485"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<hr />
<!-- **** SPOTLIGHTS 2 **** -->


<!-- **** SPOTLIGHTS 3 **** -->
<table cellpadding="0" cellspacing="0"><tr><td width="72"></td><td>
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*txt*/
google_ad_slot = "1699448869";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td></tr></table>
<hr />

<center>

<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*imgtxt*/
google_ad_slot = "8606855891";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</center>
<hr />


<!-- **** END SPOTLIGHTS **** -->

</td></tr>

<tr><td>
<p>Jump to: <a href="#top" target="_top"><b>Top of Page</b></a>
or <a href="../default.asp" target="_top"><b>HOME</b></a> or
<a href='pr_border-style.asp@output=print' target="_blank">
<img src="../images/print.gif" alt="Printer Friendly" border="0" />
<b>Printer friendly page</b></a></p>
<p>W3Schools provides material for training only. We do not warrant the correctness of its contents.
The risk from using it lies entirely with the user.
While using this site, you agree to have read and accepted our
<a href="../about/about_copyright.asp">terms of use</a> and
<a href="../about/about_privacy.asp">privacy policy</a>.
</p>
<p><a href="../about/about_copyright.asp">Copyright 1999-2008</a> by Refsnes Data. All Rights Reserved.</p>
<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr>
<td width="60%" align="left">
<a href="../../validator.w3.org/check@uri=referer" target="_blank">
<img src="../images/vxhtml.gif" alt="Validate" width="88" height="31" border="0" /></a>
<a href="../../jigsaw.w3.org/css-validator/check@uri=referer" target="_blank">
<img src="../images/vcss.gif" alt="Validate" width="88" height="31" border="0" /></a>
<a href="../../www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level A Conformance" target="_blank">
<img src="../images/wai.gif" alt="W3C-WAI level A conformance icon" width="88" height="31" border="0" /></a>
</td>
<td>
<a href="../xhtml/xhtml_howto.asp" target="_top">W3Schools was converted to XHTML in December 1999</a>
</td></tr>

</table>
</td></tr>
</table>
</td>


<td width="145" align="center" valign="top">




<iframe style="background-color:#f1f1f1" src="../banners/rightcolumn.asp@secid=css" height="1500" width="147"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
</iframe>

</td>
</tr></table>

</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -