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; 可以让左右 div 从左到有排列而不是默认从上到下
.div9,.div6,.div7 ,.div8{ 多个并列写,必须之间 加上 逗号
background-color:yellow;
-->
<head>
<title>
边框属性设置
</title>
<meta charset="utf-8">
<style type="text/css">
div{
float:left;
backgroud-color:red;
border-style:solid;
}
.div1{
backgroud-color:#f2f2f2;
border-style-left:dashed;
border-color:green;
}
.div2{
backgroud-color:#f2f2f2;
border-style:dotted;
border-color:red;
}
.div3{
backgroud-color:#f2f2f2;
border-style:double;
border-color:blue;
}
.div4{
backgroud-color:#f2f2f2;
border-style:solid;
border-color:yellow;
}
.div9,.div6,.div7,.div8{
border-width:30px;
width:80px;
height:50px;
backgroud-color:green;
border-bottom-color:green;
}
.div6{
border-style:groove;
}
.div7
{
border-style:ridge;
}
.div8{
border-style:inset;
}
.div9{
background-color:yellow;
border-style:outset;
}
</style>
</head>
<body>
<div class="div1">
边框1
</div>
<div class="div2">
边框2
</div>
<div class="div3">
边框3
</div>
<div class="div4">
边框4
</div>
<div class="div5">
边框5
</div>
<div class="div6">
边框凸槽
</div>
<div class="div7">
边框垄状
</div>
<div class="div8">
边框inset
</div>
<div class="div9">
边框outset
</div>
</body>
<html>
跟随视频学习,手写记录自己学习过程中的点点滴滴,一起加油吧。