CSS边框与边界

2024-04-27 14:31:24

字体：大中小

来源：转载

供稿：网友

CSS边框与边界

Posted on 2014-10-29 22:36 脚本小子-小贝阅读(...) 评论(...) 编辑收藏

CSS边框与边界

1、CSS 边框属性CSS边框属性允许你指定一个元素边框的样式和颜色。1.1、边框样式边框样式属性指定要显示什么样的边界。border-style属性用来定义边框的样式1.2、边框宽度您可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值）和 thick。注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和1px。1.3、边框颜色border-color属性用于设置边框的颜色。可以设置的颜色： name - 指定颜色的名称，如 "red" RGB - 指定 RGB 值, 如 "rgb(255,0,0)" Hex - 指定16进制值, 如 "#ff0000"您还可以设置边框的颜色为"transparent"。注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。1.4、边框-简写属性上面的例子用了很多属性来设置边框。你可以在"border"属性中设置： border-width border-style (required) border-color2、CSS Padding(内边界)CSS Padding（填充）属性定义元素边框与元素内容之间的空间。当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。3、CSS Margin(外边距)CSS Margin(外边距)属性定义元素周围的空间。margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keyWords" content="CSS边框与边界"/><meta name="description" content="CSS边框与边界"/><meta name="author" content="xiaobei QQ:2801616735"/><title>CSS边框与边界</title></head><body>    <ul>        <li>边框</li>        <li>内边界</li>        <li>外边界</li>    </ul>    <h2>1、边框border</h2>    <p style="border-color:red; border-style:dashed; border-width:1px;">border-style<br/>border-color<br/>border-width</p>    <hr/>    <h2>2、边框方向设置</h2>    <p style="border-style:dashed; border-color:red green blue orange; height:50px;">    border-color:red green blue orange;    </p>    <hr/>    <h2>2.1、边框方向设置</h2>    <p style="border-style:dashed; border-color:red green; height:50px;">    border-color:red green;    </p>    <hr/>    <h2>2.2、边框方向设置</h2>    <p style="border-style:dashed; border-color:red green blue; height:50px;">    border-color:red green blue;    </p>    <hr/>    <h2>3、内边界</h2>    <table bgcolor="#FF0000" border="0" width="200" height="150" cellpadding="0" cellspacing="0">        <tr><td valign="top" style="padding-top:20px; padding-left:20px;">内边界</td></tr>    </table>    <hr/>    <h2>4、外边界</h2>    <table bgcolor="#FF0000" border="0" width="200" height="150" cellpadding="0" cellspacing="0">        <tr><td valign="top" style="margin-top:20px; margin-left:20px;">内边界</td></tr>    </table></body></html>

上一篇：Dreamweaver 时间轴如何打开

下一篇：iis最大连接数和队列长度