使用CSS格式化网页
厦门软件职业技术学院
设置元素边框
border-style边框样式属性
border-width边框宽度属性
border-color边框色彩属性
border属性的综合设置
border-style边框样式属性
在CSS里了,利用边框样式属性不仅可以设置单位边框样式属性,还可以对单位边框进行设置,而且也可以利用复合边框样式属性来统一设置四条边框的样式。
基本语法:
border-style:样式值
border-top-style:样式值
border-bottom-style:样式值
border-left-style:样式值
border-right-style:样式值
border-style边框样式属性
语法说明:
border-style是一个复合属性,复合属性的值有四种设置方法,其他4个都是单个边框的样式属性,只能取一个值。样式值属性的具体说明见表10-8。
设置一个值:四条边框宽度均使用一个值。
设置两个值:上边框和下边框宽度调用第一个值,左边框和右边框宽度调用第二个值。
设置三个值:上边框宽度调用第一个值,右边框与左边框宽度调用第二个值,下边框调用第三个值。
设置四个值:四条边框宽度的调用顺序为上、右、下、左。
Boder-style 属性值
名称
含义
hidden
隐藏边框
dotted
点线边框
dashed
虚线边框
solid
实线边框
double
双线边框
groove
3D凹槽
ridge
3D凸槽
inset
3D凹边
outset
3D凸边
<style type="text/css">
{border-style: dotted}
{border-style: dashed}
{border-style: solid}
{border-style: double}
{border-style: groove}
{border-style: ridge}
{border-style: inset}
{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>
<style type="text/css">
{border-style: solid double}
{border-style: double solid}
{border-style: groove double}
{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>
border-width边框宽度属性
border-width属性,是控制元素边框的宽度的一个综合属性,和border-style一样也有四种单独的设置方法,分别来定义四条边框的宽度,设置方法和边框样式一样。
基本语法:
CSS边框设计 来自淘豆网m.daumloan.com转载请标明出处.
