一、基礎(chǔ)部分
<!DOCTYPE html> <!--聲明文檔類型html5版本 具有向下兼容低版本的功能-->
<html>
<head><!--頭部: 不可視區(qū)域，看不到內(nèi)容-->
<meta charset="utf-8">
<title>文檔標題</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:red;
border:2px solid black; /*邊框的大小 邊框的樣式 邊框的顏色 */
/*
border-style:
solid 實線
dotted 點狀線
dashed 虛線
double 雙實線
border-top: 控制上邊框
border-top-width: 上邊框?qū)挾? border-top-style: 上邊框樣式
border-top-color: 上邊框顏色
border-right: 控制右邊框
border-bottom: 控制下邊框
border-left: 控制做邊框
*/
}
</style>
</head>
<body><!--身體可視區(qū)域-->
<div id="mydiv" class="mydiv">
</div>
</body>
</html>
image.png
二、案例部分
案例1
<html>
<head><!--頭部: 不可視區(qū)域，看不到內(nèi)容-->
<meta charset="utf-8">
<title>文檔標題</title>
<style type="text/css">
div{
/* width:100px; 去掉寬度默認占滿一行*/
height:100px;
background-color:red;
}
</style>
</head>
<body><!--身體可視區(qū)域-->
<div id="mydiv" class="mydiv">
</div>
</body>
</html>
image.png
案例2
<html>
<head><!--頭部: 不可視區(qū)域，看不到內(nèi)容-->
<meta charset="utf-8">
<title>文檔標題</title>
<style type="text/css">
div{
width:100px;
height:100px;
border:50px solid black;
border-top-color:red;
border-right-color:green;
border-bottom-color:pink;
border-left-color:blue;
}
</style>
</head>
<body><!--身體可視區(qū)域-->
<div id="mydiv" class="mydiv">
</div>
</body>
</html>
image.png
案例3
<html>
<head><!--頭部: 不可視區(qū)域，看不到內(nèi)容-->
<meta charset="utf-8">
<title>文檔標題</title>
<style type="text/css">
div{
width:0px;
height:0px;
border:50px solid black;
border-top-color:red;
border-right-color:green;
border-bottom-color:pink;
border-left-color:blue;
}
</style>
</head>
<body><!--身體可視區(qū)域-->
<div id="mydiv" class="mydiv">
</div>
</body>
</html>
image.png
案例4
<html>
<head><!--頭部: 不可視區(qū)域，看不到內(nèi)容-->
<meta charset="utf-8">
<title>文檔標題</title>
<style type="text/css">
div{
width:0px;
height:0px;
border:50px solid black;
border-top-color:red;
border-right-color:green;
border-bottom-color:pink;
border-left-color:blue;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
transition-duration:2s; /*過渡時間2秒*/
}
div:hover{
transform:rotate(180deg) /*旋轉(zhuǎn)180度*/
}
</style>
</head>
<body><!--身體可視區(qū)域-->
<div id="mydiv" class="mydiv">
</div>
</body>
</html>
image.png
三、注意事項
一、width不填默認是瀏覽器的寬度
二、border的屬性值可以為none,但border-top,border-right,border-bottom,border-left的屬性不可以為none
三、顏色的取值
1、英文單詞:red green blue white black
???例如: color:red;
2、16進制:1234567890abcdef
???例如: color:#000
3、rgb
?? r:red ?紅色
?? g:green ?綠色
?? b:blue ?藍色
?? 取值情況：0-255
????例如:rgb(0,0,0)
4、rgba
?? a:Alpha ?透明度
??取值在0到1?0代表完全透明，1代表完全不透明
????例如:rgb(255,0,255,0.2)
