日度归档:2020年1月4日

css border-style属性简介说明


摘要:
下文讲述border-style属性相关值说明,如下所示:


border-style功能简介:

border-style用于设置元素的边框样式:
例:
无边框、点线边框、虚线边框、双线边框、3D边框等

属性值

备注说明
none

默认无边框
dotted

定义一个点线边框
dashed

定义一个虚线边框
solid

定义实线边框
double

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

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

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

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

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


border-style举例说明:

    <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(maomao365.com)</title>
<style>
p.a { border-style:none;border-width:5px;}
p.b { border-style:dotted;border-width:5px;}
p.c { border-style:dashed;border-width:5px;}
p.d { border-style:solid;border-width:5px;}
p.e { border-style:double;border-width:5px;}
p.f { border-style:groove;border-width:5px;}
p.g { border-style:ridge;border-width:5px;}
p.h { border-style:inset;border-width:5px;}
p.i { border-style:outset;border-width:5px;} 
 
</style>
</head>

<body>
<p class="a">边框样式定义</p>
<p class="b">边框样式定义</p>
<p class="c">边框样式定义</p>
<p class="d">边框样式定义</p>
<p class="e">边框样式定义</p>
<p class="f">边框样式定义</p>
<p class="g">边框样式定义</p>
<p class="h">边框样式定义</p>
<p class="i">边框样式定义</p>

</body>

</html>

border_style

border_style

css 如何定义一个点线边框呢?


摘要:
下文通过举例的方式讲述在html中定义一个点线边框的方法分享,如下所示:


实现思路:
使用border-style 属性可输出一个点线边框

例:

  <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(maomao365.com)</title>
<style>
p.a 
{
	border-style:solid;
	border-width:5px;
}
p.b 
{
	border-style:solid;
	border-width:medium;
}
p.c
{
	border-style:solid;
	border-width:1px;
}
</style>
</head>

<body>
<p class="a">边框5像素 实心边框</p>
<p class="b">边框  实心边框</p>
<p class="c">边框 1像素 实心边框</p>
<p><b>注意事项:</b> "border-width" 属性,单独设置无起任何作用,先使用 "border-style" 属性来设置边框样式</p>
</body>

</html>
实心边框设置

实心边框设置

CSS 如何对元素边框进行设置呢?


摘要:
下文讲述使用css对元素边框进行设置的方法分享,如下所示;

css边框属性设置可以使用以下属性

属性

备注说明
border

简写属性,用于把针对四个边的属性设置在一个声明。
border-style

用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width

简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color

简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom

简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color

设置元素的下边框的颜色。
border-bottom-style

设置元素的下边框的样式。
border-bottom-width

设置元素的下边框的宽度。
border-left

简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color

设置元素的左边框的颜色。
border-left-style

设置元素的左边框的样式。
border-left-width

设置元素的左边框的宽度。
border-right

简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color

设置元素的右边框的颜色。
border-right-style

设置元素的右边框的样式。
border-right-width

设置元素的右边框的宽度。
border-top

简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color

设置元素的上边框的颜色。
border-top-style

设置元素的上边框的样式。
border-top-width

设置元素的上边框的宽度。

例:
设置元素底部1像素 实心黑色边框

 div{
   border:1px solid black;
 }