CSS 实用实例

来源：网络维他命作者：Linyupark 出处：巧巧读书 2008-02-11 进入讨论组

关键词：
groove
perl
word
html
asp

Border 边框

设置四边框的样式

运行代码框
<html> <head> <style type="text/css"> p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} </style> </head> <body> <p class="dotted">A dotted border</p> <p class="dashed">A dashed border</p> <p class="solid">A solid border</p> <p class="double">A double border</p> <p class="groove">A groove border</p> <p class="ridge">A ridge border</p> <p class="inset">An inset border</p> <p class="outset">An outset border</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

设置各边的边框

运行代码框
<html> <head> <style type="text/css"> p.soliddouble {border-style: solid double} p.doublesolid {border-style: double solid} p.groovedouble {border-style: groove double} p.three {border-style: solid double groove} </style> </head> <body> <p class="soliddouble">Some text</p> <p class="doublesolid">Some text</p> <p class="groovedouble">Some text</p> <p class="three">Some text</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

设置四边框的颜色

运行代码框
<html> <head> <style type="text/css"> p.one { border-style: solid; border-color: #0000ff } p.two { border-style: solid; border-color: #ff0000 #0000ff } p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff } p.four { border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } </style> </head> <body> <p class="one">One-colored border!</p> <p class="two">Two-colored border!</p> <p class="three">Three-colored border!</p> <p class="four">Four-colored border!</p> <p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

设置底边框的宽

运行代码框
<html> <head> <style type="text/css"> p { border-style: solid; border-bottom-width: 15px } </style> </head> <body> <p><b>Note:</b> The "border-bottom-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

设置底边框宽

运行代码框
<html> <head> <style type="text/css"> p { border-style: solid; border-left-width: 15px } </style> </head> <body> <p><b>Note:</b> The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

右边框宽

运行代码框
<html> <head> <style type="text/css"> p { border-style: solid; border-right-width: 15px } </style> </head> <body> <p><b>Note:</b> The "border-right-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上边框宽

运行代码框
<html> <head> <style type="text/css"> p { border-style: solid; border-top-width: 15px } </style> </head> <body> <p><b>Note:</b> The "border-top-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

所有底边框的属性一行解决

运行代码框
<html> <head> <style type="text/css"> p { border-bottom: medium solid #ff0000 } </style> </head> <body> <p>Some text.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

左边框的属性一行解决

运行代码框
<html> <head> <style type="text/css"> p { border-left: medium solid #ff0000 } </style> </head> <body> <p>Some text.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

右边框的属性一行解决

运行代码框
<html> <head> <style type="text/css"> p { border-right: medium solid #ff0000 } </style> </head> <body> <p>Some text.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上边框的属性一行解决

运行代码框
<html> <head> <style type="text/css"> p { border-top: medium solid #ff0000 } </style> </head> <body> <p>Some text.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

所有边框的宽度属性一行解决

运行代码框
<html> <head> <style type="text/css"> p.one { border-style: solid; border-width: 5px } p.two { border-style: solid; border-width: 5px 10px } p.three { border-style: solid; border-width: 5px 10px 1px } p.four { border-style: solid; border-width: 5px 10px 1px medium } </style> </head> <body> <p class="one">Some text</p> <p class="two">Some text</p> <p class="three">Some text</p> <p class="four">Some text</p> <p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

所有边框的属性一行解决

运行代码框
<html> <head> <style type="text/css"> p { border: medium double rgb(250,0,255) } </style> </head> <body> <p>Some text</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

观看地址： http://www.qqread.com/css/p396806.html进入讨论组讨论。