WEB前端开发工程师 学习第二天 边框
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>
效果图
