1.开启前端之路
学习目标：
- 掌握width，height基本样式；
- 掌握边框的使用；
- 利用边框画三角形，甚至各种形状；
- 掌握圆角的使用方法；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#lili{
width:100px;/* 宽度 */
height:100px;/*（高度）*/
border: 1px solid red;/*（边框：1像素宽，实线，红色）*/
border-color: black;/*（设置边框颜色）*/
border-width:10px;/*（设置边框宽度）*/
border-style:dotted;/*(设置边框形式)*/
}
/* 每条边框也可以单独定制：
#lili{
width:100px;
height:100px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
}
简化：
#lili{
width:100px;
height:100px;
border-top:1px solid red;
}*/
</style>
</head>
<body>
<div id = "lili"></div>
</body>
</html>
单位（PX）：
- PX：像素（pixel）；
边框（border）：
-
border-left(左边框)、border-right（右边框）、border-top（上边框）、border-bottom（下边框）
-
border-style（设置边框形式）：
- solid： 实线；
- dotted： 点线；
- dashed : 虚线；
- double: 双实线；
- none： 默认无边框；
-
border-color/width/style（多值设置）:
- 一个值： 四条边都一样；
- 两个值： 上下一样，左右一样；（上下、左右）
- 三个值： 上一样，左右一样，下一样；（上、左右、下）
- 四个值：上一样，右一样，下一样，左一样；（上、右、下、左）
-
符合样式：
- 语法糖：border : width style color , 顺序不所谓；
边框习题：
画制一个宽度和颜色都不一样的正方形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#lili{
width:100px;
height:100px;
/* border-top-width:1px;
border-top-style:solid;
border-top-color:red;
border-bottom-width:2px;
border-bottom-style:dashed;
border-bottom-color:green;
border-left-width:3px;
border-left-style:dotted;
border-left-color:black;
border-right-width:4px;
border-right-style: double;
border-right-color:blue; */
border-width:1px 4px 3px 2px ;
border-style: solid double dashed dotted;
border-color: red blue green black;
}
</style>
</head>
<body>
<div id="lili"></div>
</body>
</html>
边框三角形：
-
出现斜角的情况：
- 同一个元素身上相邻的两条边框颜色不一样时；
-
画制一个由四个三角形组成的正方形：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #lili{ width: 0px; height: 0px; border-width: 70px; border-style: solid; border-color: red green blue black; } </style> </head> <body> <div id="lili"></div> </body> </html>
-
-
画制作一个三角形：
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #lili{ width: 0; height: 0; border-width: 70px; border-style:solid ; border-color: red transparent transparent; } </style> </head> <body> <div id="lili"></div> </body> </html>
-
圆角：
-
border-radius: 圆角；
-
多值：
-
border-radius:50px 10px ; /*当有两个值时，第一个值设定左上角和右下角，第二个值设定的是右上角和左下角；*/ -
border-radius:50px 10px 20px; /*当有三个值时，第一个值设定左上角，第二个值设定右上角和左下角，第三个值设定右下角*/ -
border-radius:50px 10px 20px 30px ; /*当有四个值时，第一个值设定左上角，第二个值设定右上角，第三个值设定右下角，第四个值设定左下角；*/
-
-
每个圆角都有x轴和Y轴：
-
border-radius:50px 10px 20px 30px / 10px 20px 30px 40px ; /*“/”前面的四个值是分别对应左上、右上、右下、左下四个圆角的X轴，“/”后面的四个值是分别对应左上、右上、右下、左下四个圆角的Y轴*/
-
十六进制颜色
- https://www.runoob.com/html/html-colornames.html；
- https://www.runoob.com/cssref/css-colors.html;
