cjh CSS 边框（边框样式、边框的颜色、边框的各边设置不一样）
CSS 边框（边框样式、边框的颜色、边框的各边设置不一样）
CSS 边框属性
CSS border 属性允许您指定元素边框的样式、宽度和颜色。
<p style="border: 1px solid #000;">我的所有边都有边框。</p>
<p style="border-bottom: 1px solid red;">我有一条红色的下边框。</p>
<p style="border: 1px solid #ccc; border-radius: 16px;">我有圆角边框。</p>
<p style="border-left:6px solid #2196F3;background-color: #ddffff;">我有一条蓝色的左边框。</p>
CSS 边框样式
border-style 属性指定要显示的边框类型。
允许以下值：
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
实例
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
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.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h1>border-style 属性</h1>
<p>此属性规定要显示的边框类型：</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">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p>
</body>
</html>
border-color 属性用于设置四个边框的颜色
注释：如果未设置 border-color，则它将继承元素的颜色。
演示不同的边框颜色：
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
CSS 边框各边
CSS 边框颜色
CSS 简写边框属性
CSS 边框 - 单独的边
在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）：
实例
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
不同的边框样式它的工作原理是这样的：
如果 border-style 属性设置四个值：
border-style: dotted solid double dashed;
上边框是虚线
右边框是实线
下边框是双线
左边框是虚线
如果 border-style 属性设置三个值：
border-style: dotted solid double;
上边框是虚线
右和左边框是实线
下边框是双线
如果 border-style 属性设置两个值：
border-style: dotted solid;
上和下边框是虚线
右和左边框是实线
如果 border-style 属性设置一个值：
border-style: dotted;
四条边均为虚线
实例
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
/* 四个值 */
p.four {
border-style: dotted solid double dashed;
}
/* 三个值 */
p.three {
border-style: dotted solid double;
}
/* 两个值 */
p.two {
border-style: dotted solid;
}
/* 一个值 */
p.one {
border-style: dotted;
}
</style>
</head>
<body>
<h1>单独的边框</h1>
<p class="four">四种不同的边框样式。</p>
<p class="three">三种不同的边框样式。</p>
<p class="two">两种不同的边框样式。</p>
<p class="one">一种边框样式。</p>
</body>
</html>
2、本资源基本为原创，部分来源其他付费资源平台或互联网收集，如有侵权请联系及时处理。
3、本站大部分文章的截图来源实验测试环境，请不要在生产环境中随意模仿，以免带来灾难性后果。
转载请保留出处: www.zh-cjh.com珠海陈坚浩博客 » CSS 边框（边框样式、边框的颜色、边框的各边设置不一样）
作者： cjh
| 手机扫一扫，手机上查看此文章： |
一切源于价值！
其他 模板文件不存在: ./template/plugins/comment/pc/index.htm