一.边框
1.边框样式
使用border-style属性用来定义边框的样式
参考值:
- none: 默认无边框
- dotted: 定义一个点线边框
- dashed: 定义一个虚线边框
- solid: 定义实线边框
- double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
- groove: 定义3D沟槽边框。效果取决于边框的颜色值
- ridge: 定义3D脊边框。效果取决于边框的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset: 定义一个3D突出边框。 效果取决于边框的颜色值
- hidden:隐藏边框
语法:
p.solid
{
border-style:solid;
}
2.边框厚度
使用border-width 属性为边框指定宽度。
直接指定长度值,单位为px,em
也可以直接使用三个关键字:thick,medium(默认),thin
语法
p.A
{
border-style:solid;
border-width:5px;
}
p.B
{
border-style:solid;
border-width:thick;
}
3.边框颜色
border-color属性用于设置边框的颜色。
可以设置的颜色:
- name - 指定颜色的名称,如 “red”
- RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
- Hex - 指定16进制值, 如 “#ff0000”
- 甚至透明:transparent
语法:
p
{
border-style:solid;
border-width:5px;
border-color:red;
}
4.单独设置各边
- border-top-style:上边框
- border-right-style:右边框
- border-bottom-style:底边框
- border-left-style:左边框
几种语法:
/*第一种表达*/
p
{
border-top-style:solid;
border-right-style:dotted;
border-bottom-style:dashed;
border-left-style:double;
}
/*第二种表达,注意顺序,依旧是上右底左*/
p
{
border-style:solid dotted dashed double;
}
/*第三种表达 上:solid ,右/左:dotted ,底:double*/
p
{
border-style:solid dotted double;
}
/*第四种表达 上底:solid, 左右:double*/
p
{
border-style:solid double;
}
5.简写
你可以直接在"border"属性中设置(按照顺序):
- border-width
- border-style (required)
- border-color
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>边框</title>
<style>
p.none{border:none;}
p.dotted{border:5px dotted green;}
p.dashed{border:5px dashed green;}
p.solid{border:5px solid green;}
p.double{border:5px double green;}
p.groove{border:5px groove green;}
p.ridge{border:5px ridge green;}
p.inset{border:5px inset green;}
p.outset{border:5px outset green;}
p.hidden{border:hidden;}
p.ex
{
border-style:dotted dashed solid double;
border-width:10px;
border-color:green;
}
</style>
</head>
<body>
<p class = "none">无边框</p>
<p class = "dotted">点线边框</p>
<p class = "dashed">虚线边框</p>
<p class = "solid">实线边框</p>
<p class = "double">双边框</p>
<p class = "groove">凹槽边框</p>
<p class = "ridge">脊状边框</p>
<p class = "inset">嵌入边框</p>
<p class = "outset">外凸边框</p>
<p class = "hidden">隐藏边框</p>
<p class = "ex">上方是点线,<br/>右边是虚线,<br/>底边是实线,<br/>左边是双线</p>
</body>
</html>
结果:
二.轮廓
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。
其用法与边框相同,把border替换为outline就可以了。
需要注意的地方:
轮廓并不能像边框一样单独设置各边
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>轮廓</title>
<style>
p.none
{
border:1px solid red;
outline:none;
}
p.dotted
{
border:1px solid red;
outline:5px dotted green;
}
p.dashed
{
border:1px solid red;
outline:5px dashed green;
}
p.solid
{
border:1px solid red;
outline:5px solid green;
}
p.double
{
border:1px solid red;
outline:5px double green;
}
p.groove
{
border:1px solid red;
outline:5px groove green;
}
p.ridge
{
border:1px solid red;
outline:5px ridge green;
}
p.inset
{
border:1px solid red;
outline:5px inset green;
}
p.outset
{
border:1px solid red;
outline:5px outset green;
}
p.hidden
{
border:1px solid red;
outline:hidden;
}
p.ex
{
border:1px solid red;
outline-style:dotted dashed solid double;
outline-width:10px;
outline-color:green;
}
</style>
</head>
<body>
<p class = "none">无轮廓</p>
<p class = "dotted">点线轮廓</p>
<p class = "dashed">虚线轮廓</p>
<p class = "solid">实线轮廓</p>
<p class = "double">双轮廓</p>
<p class = "groove">凹槽轮廓</p>
<p class = "ridge">脊状轮廓</p>
<p class = "inset">嵌入轮廓</p>
<p class = "outset">外凸轮廓</p>
<p class = "hidden">隐藏轮廓</p>
<p class = "ex">上方是点线,<br/>
右边是虚线,<br/>
底边是实线,<br/>
左边是双线,<br/>
然并软,outline并没有像border一样可以设置各边
</p>
</body>
</html>
结果: