<style>.box { border-bottom: 15px solid yellow border-bottom-style: double
}</style>
或者也可以直接在HTML元素的style属性中进行设置,如:
<div style="border-bottom: 15px solid yellowborder-bottom-style: double">这是一个盒子</div>
在这种情况下,border-bottom属性用于设置下边框的宽度和颜色,border-bottom-style属性用于设置下边框的样式,double值表示双实线。
注意:这里的颜色值可以是颜色名称(如yellow),也可以是十六进制颜色值(如#FFFF00)或RGB颜色值(如rgb(255, 255, 0))。
div+css中层的边框大小可以设置的,我们需要给这个div,width和height,然后在使用border来实现对边框的 *** 作,boder:4px solid #f00它的意思就是边框的宽度是4px,实线的,颜色是红色的,我们通过代码来理解下:<html>
<head>
<style>
#div1{ //通过id实现
width:300px
height:30px
border:10px solid #f00
marign:0 auto
}
</head>
<body>
<div id='div1' class='div1'>
<p>我的位置</p>
</div>
</body>
</html>
举报
盒子模型是由 margin + border + padding + 网页元素(content)
div{
width: 200px
height: 200px
border-color:red}
border-top-color: red设置上边框的颜色
border-right-color:red设置右边框的颜色
border-bottom-color:red设置下边框的颜色
border-left-color: red设置左边框的颜色
border-color:red yellow;第一个值red表示上下边框的颜色 第二个值表示左右边框的颜色
border-color:red green blue第一个值表示上边框的颜色 第二个值表示左右边框的颜色 第三个值表示下边框的颜色
border-color:red green blue yellow按照顺时针的顺序 第一个值表示上边框的颜色 第二个值表示右边框的颜色,第三个值表示下边框的颜色 第四个值表示左边框的颜色
★单独设置颜色或者边框的粗细的时候 必须要把border-style设置好
div{
width: 200px
height: 200px
border-width:thick}
border-width: thick粗的边框 系统会设置为5像素
border-width: mediummedium是中等的粗细 系统会默认设置为3像素
border-width: thinthin是最细的 系统会默认设置为1像素
border也是一个复合属性可以写成border:1px solid red
border-top-width: 10px设置上边框的粗细。同理设置下边框、左边框、右边框,可以将top改成bottom left right
border-width: 10px 20px设置边框 上下为10px 左右为20px
border-width: 10px 20px 50px设置边框的粗细为 上边框10px 左右边框粗细为20px 下边框粗细为30px
border-width: 10px 30px 50px 70px顺时针的顺序 设置边框的粗细 上边框为10px 右边框为30px 下边框为50px 左边框为70px
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)