1.边框的组成
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style> ???????????div{ ???????????????width: 400px; ???????????????height: 400px; ???????????????border:1px solid red; ???????????} ???????</style> ???????<!-- ???????????边框组成 ???????????????1、边框的粗细 ???????????????2、边框的样式 ???????????????3、边框的颜色 ???????--> ???</head> ???<body> ???????<div></div> ???</body></html>2.边框的方向
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style> ???????????div{ ???????????????width: 400px; ???????????????height: 400px; ???????????????border: 1px solid red; ???????????????border-right:5px dashed black; ???????????} ???????</style> ???????<!-- ???????????边框的方向 ???????????????top right bottom left ???????????????????????????border ???????????????border-top ???????????????border-right ???????????????border-bottom ???????????????border-left ???????--> ???</head> ???<body> ???????<div></div> ???</body></html>3.边框的组成和方向
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style> ???????????div{ ???????????????width: 400px; ???????????????height: 400px; ???????????????border: 1px solid red; ???????????????border-top-color: black; ???????????} ???????</style> ???????<!-- ???????????边框组成 ???????????????1、边框的粗细 ???????????????2、边框的样式 ???????????????3、边框的颜色 ???????????????????????????边框的方向 ???????????????top right bottom left ???????????????????????????border ???????????????border-top ???????????????????border-top-width ???????????????????border-top-style ???????????????????border-top-color ???????????????border-right ???????????????????border-right-width ???????????????????border-right-style ???????????????????border-right-color ???????????????border-bottom ???????????????????border-bottom-width ???????????????????border-bottom-style ???????????????????border-bottom-color ???????????????border-left ???????????????????border-left-width ???????????????????border-left-style ???????????????????border-left-color ???????--> ???</head> ???<body> ???????<div></div> ???</body></html>4.边框的形状
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style> ???????????div{ ???????????????width: 0px; ???????????????height: 0px; ???????????????border: 20px solid red; ???????????????border-top-color:black; ???????????} ???????</style> ???????<!-- ???????????边框的形状：非矩形 ???????--> ???</head> ???<body> ???????<div></div> ???</body></html>5.边框三角形
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style> ???????????div{ ???????????????width: 0; ???????????????height: 0; ???????????????border: 10px solid #fff; ???????????????/*border-top-color:#ccc;*/ ???????????????border-left-color:#ccc; ???????????} ???????</style> ???</head> ???<body> ???????<div></div> ???</body></html>效果图
WEB前端开发工程师 学习第二天 边框
原文地址：https://www.cnblogs.com/mayanlianggcs/p/9513354.html