核心提示：HTML基础学习-17-border 边框相关属性学习!DOCTYPE html!--border-style 边框风格可以 border-style-left-right -top -bottom定...
HTML基础学习-17-border 边框相关属性学习
<!DOCTYPE html>
<!--
border-style 边框风格 可以 border-style-left -right -top -bottom 定义某个方向的边框
none 默认属性
solid 直线边框
dashed 虚线边框
dotted 点状边框
double 双线边框
依托border-color 属性的 边框属性设置
groove 凸槽边框
ridge 垄状边框
inset inset边框
outset outset边框
inherit
border-width thin medium中等 px具体值 inherit 边框宽度属性值
border-color 统一四个边框
边框颜色值 同样可以 border-left-color border-right-color
border-top-color border-bottom-color 定义四个方向上的边框
属性值的四种情况
一起写的情况 一个值到四个值写法
border-color :(上下左右)
border-color : (上下,左右)
border-color:(上，左右，下)
border-color:(上,右,下，左)
border: 样式 宽度 颜色
======================重要内容=====================注意某个属性没有生效一定是 单词拼错了或者未渲染，父布局或者上面代码就有问题====================
float:left; 可以让左右 p 从左到有排列而不是默认从上到下
.p9,.p6,.p7 ,.p8{ 多个并列写，必须之间 加上 逗号
background-color:yellow;
-->
<head>
<title>
边框属性设置
</title>
<meta charset="utf-8">
<style type="text/css">
p{
float:left;
backgroud-color:red;
border-style:solid;
}
.p1{
backgroud-color:#f2f2f2;
border-style-left:dashed;
border-color:green;
}
.p2{
backgroud-color:#f2f2f2;
border-style:dotted;
border-color:red;
}
.p3{
backgroud-color:#f2f2f2;
border-style:double;
border-color:blue;
}
.p4{
backgroud-color:#f2f2f2;
border-style:solid;
border-color:yellow;
}
.p9,.p6,.p7,.p8{
border-width:30px;
width:80px;
height:50px;
backgroud-color:green;
border-bottom-color:green;
}
.p6{
border-style:groove;
}
.p7
{
border-style:ridge;
}
.p8{
border-style:inset;
}
.p9{
background-color:yellow;
border-style:outset;
}
</style>
</head>
<body>
<p class="p1">
边框1
</p>
<p class="p2">
边框2
</p>
<p class="p3">
边框3
</p>
<p class="p4">
边框4
</p>
<p class="p5">
边框5
</p>
<p class="p6">
边框凸槽
</p>
<p class="p7">
边框垄状
</p>
<p class="p8">
边框inset
</p>
<p class="p9">
边框outset
</p>
</body>
<html>
