CSS层叠样式表边框样式
我想在html中设置破折线式边框或者点线式边框?
我想在html中我的段落周围加上双划线边框?
使用样式表如何画出脊线式边框或者槽线式边框?
解释
属性
:
Border Style用法:
border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; 定义:
边框的样式可以使用标记border-style来进行设置。边框样式可以取以下的值。
a)dotted-可以创建点线式边框。
b)dashed-可以创建破折线式边框。
c)solid-可以创建直线式边框。
d)double-可以创建双线式边框。
e)groove-可以创建槽线式边框。
f)ridge-可以创建脊线式边框。
g)inset-可以创建内嵌效果的边框。
h)outset-可以创建突起效果的边框。
示例1: <div style="border-width: 2px;
border-style: dotted; border-color: red; "> testing border style</div>
结果: 测试边界风格
<div style="border-width: 2px;
border-style: dashed; border-color: red; "> 测试边界风格</div>
结果: 测试边界风格
<div style="border-width: 2px;
border-style: solid; border-color: red; "> 测试边界风格</div>
结果: 测试边界风格
<div style="border-width: 4px;
border-style: double; border-color: red; "> testing border style</div>
结果: 测试边界风格
<div style="border-width: 4px;
border-style: groove; border-color: red; "> 测试边界风格</div>
结果: 测试边界风格
<div style="border-width: 4px;
border-style: ridge; border-color: red; "> 测试边界风格 </div>
结果: 测试边界风格
<div style="border-width: 4px;
border-style: inset; border-color: red; "> 测试边界风格</div>
结果: 测试边界风格
<div style="border-width: 4px;
border-style: outset; border-color: red; "> 测试边界风格</div>
结果: 测试边界风格