CSS border边框的用法
2019-07-11 本文已影响0人
氢金
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框盒子学习</title>
<style type="text/css">
/* 全写模式↓ */
.box{
/* 分辨率1920*1080 在同一面积下小格子越多图像就越清晰*/
/* 设置 单位为px（像素） */
width: 200px;
height: 200px;
/* 表示给盒子谁知边框的宽度 */
border-width: 3px;
/* 表示设置盒子的风格 */
border-style:solid;
/*设置边框的颜色 */
border-color: mediumvioletred;
}
/* 简写方法↓↓ */
.box2{
width: 200px;
height: 200px;
border:3px solid olivedrab;
}
</style>
</head>
<body>
<div class="box">我是第一个盒子(繁重的写法)111</div>
<div class="box2">我是第二个盒子（简便的写法）222</div>
</body>
</html>
浏览器效果
