CSS语言边框 |
博文介绍 |
有关上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。
在这里主要强调边框样式属性border-style,borderColor可以作为内边框的颜色,外边框在变化。 滤镜在边框样式中的运用。
|
一、边框样式 |
1、一般边框 |
参照:
<TABLE borderColor=#003333 height=330 cellSpacing=10 cellPadding=10 width=800 align=center bgColor=#006666 border=16> </TBODY></TABLE>
|
效果如下: |
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。 |
2、边框样式(none:无样式) |
代码: <TABLE borderColor=#FF3300 height=330 cellSpacing=10 cellPadding=5 width=800 align=center style="border:5 none" bgColor=#006666 border=16>
外边框为默认为黑色,内边框颜色为borderColor=#FF3300
|
效果如下: |
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。 |
3、边框样式(dotted:点线) |
代码: <TABLE borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5 width=800 align=center style="border:5 dotted #CC0033" bgColor=#006666 border=16>
说明: 外边框样式为 style="border:5 dotted #CC0033" bgColor=#006666 border:5 外边框的宽度
内边框颜色为
|
效果如下: |
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。 |
4、边框样式(dashed:虚线) |
<TABLE borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5 width=800 align=center style="border:5 dashed #CC0033" bgColor=#006666 border=16>
|
效果如下: |
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。 |
5、边框样式(solid:实线) |
<TABLE borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5 width=800 align=center style="border:15 solid #003333" bgColor=#006666 border=16>
|
效果如下: |
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。 |
6、边框样式(double:双线) |
<TABLE borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5 width=800 align=center style="border:15 double #003333" bgColor=#006666 border=16>
|
效果如下: |
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。 |
7、边框样式(groove:槽线) |
<TABLE borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5 width=800 align=center style="border:15 groove #00ffff" bgColor=#006666 border=16>
|
效果如下: |
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。 |
8、边框样式(ridge:脊线) |
<TABLE borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5 width=800 align=center style="border:15 ridge #00ffff" bgColor=#006666 border=16> |
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。 |
9、边框样式(inset:内凹) |
<TABLE borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5 width=800 align=center style="border:15 inset #00ffff" bgColor=#006666 border=16>
|
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。 |
10、边框样式(outset:外凸) |
<TABLE borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5 width=800 align=center style="border:15 outset #00ffff" bgColor=#006666 border=16>
|
效果如下: |
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。 |
11、边框样式(dashed:虚线的变化样式——邮票框) |
当style外边框的颜色值和bgColor背景的颜色值相同时重叠形成邮票锯齿状。
<TABLE borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5 width=800 align=center style="border:5 dashed #003333"
|
效果如下: |
这里是文字的输入地方,随着文字的增多,边框就逐渐放大。可以放加入背景图片的代码 ,在这里还可以放一个或多个动画代码(做多层透明flash动画)。 |
12、边框样式的结合样式 |
dashed样式嵌套inset样式,设置border=0
<TABLE borderColor=#FFFF00 height=330 cellSpacing=10 cellPadding=5 width=800 align=center style="border:5 dashed #003333"
|
效果如下: |
|
|
评论