css--盒子边框 border
程序员文章站
2022-05-26 23:29:32
...
1、CSS 边框属性
border-width
border-style
border-color
1.1 边框样式 border-style :
border-style 值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
1.2边框颜色 border-color
- name - 指定颜色的名称，如 "red"
- RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
- Hex - 指定16进制值, 如 "#ff0000"
1.3边框-简写属性
border: 边框粗细 边框样式 边框颜色
border:5px solid red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div{*/
/* width: 200px;*/
/* height: 200px;*/
/* border-width: 5px;*/
/* !*border-style: solid;*!*/
/* !*border-style: dashed;*!*/
/* !*border-style: dotted;*!*/
/* !*border-color: orange;*!*/
/* !*border:5px solid red;*!*/
/*}*/
div{
width: 200px;
height: 200px;
border-top: 5px solid red;
border-left: 4px dashed green;
border-right: 6px dotted blue;
border-bottom: 7px solid orange;
}
/*input{*/
/* border-top: none;*/
/* border-bottom: 2px dashed orange;*/
/* border-right: none;*/
/* border-left: none;*/
/*}*/
input{
border: none;
border-bottom: 2px double orange;
}
</style>
</head>
<body>
<div></div>
用户名：<input type="text"/> <br>
密码：<input type="password"/>
</body>
</html>1.4边框-单独设置各边
border-top: 5px solid red; 上边框
border-left: 4px dashed green; 左边框博客搬家
border-right: 6px dotted blue;
border-bottom: 7px solid orange;
上一篇： JAVA生成随机数
下一篇： IDEA集成maven的详细步骤