css的边框border
css边框的设置
1、border-style
设置边框显示样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p{
border: 10px;
}
p.none{
border-style: none;
}
p.solid{
border-style: solid;
}
p.dashed{
border-style: dashed;
}
p.dotted{
border-style: dotted;
}
p.double{
border-style: double;
}
p.groove{
border-style: groove;
}
p.ridge{
border-style: ridge;
}
p.inset{
border-style: inset;
}
p.outset{
border-style: outset;
}
p.hidden{
border-style: hidden;
}
</style>
</head>
<body>
<P class="none">没有边框</P>
<P class="solid"> 实线边框</P>
<P class="dashed">虚线边框</P>
<P class="dotted">圆点边框</P>
<P class="double">双线边框</P>
<P class="groove">3D 槽线边框</P>
<P class="ridge">3D 脊线边框</P>
<P class="inset">3D 内凹边框</P>
<P class="outset">3D 外凸边框</P>
<P class="hidden">隐藏边框</P>
</body>
</html>
2、border-width
设置边框宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p{
border-style: dotted;
border-width: 30px;
}
</style>
</head>
<body>
<P>没有边框</P>
</body>
</html>
3、border-color
修改边框颜色
4、要先设置边框样式，也就是border-style，再设置其他属性，否则是不会生效的。
5、边框样式也可以简写，直接用border
6、通过border-top、border-left、border-right、border-bottem来为每一条边框设置样式。
7、定义圆角边框
左上角：border-top-left-radius
右上角：border-top-right-radius
左下角：border-bottom-left-radius
右下角：border-bottom-right-radius
统一设置：border-radius
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p.a{
border-style: solid;
border-top-left-radius: 15px 15px;
}
p.b{
border-style:solid;
border-radius:15px / 15px;
}
</style>
</head>
<body>
<P class="a">没有边框</P>
<p class="b">这里这里</p>
</body>
</html>
8、图像边框
border-image
- border-image-slice 可切割图像
- border-image-repeat 可设置重复样式
