网页中实现各种边框样式的代码

发布时间:2019-12-13 14:23:00   分类:网页代码0
不同边框样式:

<div style="border: 1px solid #ccc!important;    border-color: #000!important;padding: 14px;">
<p>
在四边都有边框
</p>
</div>
<br>

<div style="border-bottom: 1px solid #ccc!important;padding:14px;border-color: #f44336!important;">
<p>
红色底部边框
</p>
</div>
<br>

<div style="border: 1px solid #ccc!important;padding:14px;border-radius: 16px!important;">
<p>
圆角边框
</p>
</div>
<br>

<div style="background-color: #ddffff!important;padding: 14px;border-left: 6px solid #ccc!important;border-color: #2196F3!important;">
<p>
左侧边框带宽度,颜色为蓝色
</p>
</div>


各种边框样式:

<p style="border: 1px none #000000;padding:3px">none: 默认无边框</p><br>
<p style="border: 1px dotted #000000;padding:3px">dotted: 定义一个点线边框</p><br>
<p style="border: 1px dashed #000000;padding:3px">dashed: 定义一个虚线边框</p><br>
<p style="border: 1px solid #000000;padding:3px">solid: 定义实线边框</p><br>
<p style="border: 3px double #000000;padding:3px">double: 定义两个边框。 两个边框的宽度和 border-width 的值相同</p><br>
<p style="border: 5px groove #98bf21;padding:3px">groove: 定义3D沟槽边框。效果取决于边框的颜色值</p><br>
<p style="border: 5px ridge #98bf21;padding:3px">ridge: 定义3D脊边框。效果取决于边框的颜色值</p><br>
<p style="border: 5px inset #98bf21;padding:3px">inset:定义一个3D的嵌入边框。效果取决于边框的颜色值</p><br>
<p style="border: 5px outset #98bf21;padding:3px">outset: 定义一个3D突出边框。 效果取决于边框的颜色值</p><br>
 


边框样式属性指定要显示什么样的边界。

Remark border-style属性用来定义边框的样式

border-style 值:

none: 默认无边框

 

dotted: 定义一个点线边框

 

dashed: 定义一个虚线边框

 

solid: 定义实线边框

 

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

 

groove: 定义3D沟槽边框。效果取决于边框的颜色值

 

ridge: 定义3D脊边框。效果取决于边框的颜色值

 

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

 

outset: 定义一个3D突出边框。 效果取决于边框的颜色值

 
QQ咨询