1.1边框和颜色
2020-02-23 本文已影响0人
宋雨轩同学
一、基础部分
<!DOCTYPE html> <!--声明文档类型html5版本 具有向下兼容低版本的功能-->
<html>
<head><!--头部: 不可视区域，看不到内容-->
<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: 上边框宽度
border-top-style: 上边框样式
border-top-color: 上边框颜色
border-right: 控制右边框
border-bottom: 控制下边框
border-left: 控制做边框
*/
}
</style>
</head>
<body><!--身体可视区域-->
<div id="mydiv" class="mydiv">
</div>
</body>
</html>
image.png
二、案例部分
案例1
<html>
<head><!--头部: 不可视区域，看不到内容-->
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
div{
/* width:100px; 去掉宽度默认占满一行*/
height:100px;
background-color:red;
}
</style>
</head>
<body><!--身体可视区域-->
<div id="mydiv" class="mydiv">
</div>
</body>
</html>
image.png
案例2
<html>
<head><!--头部: 不可视区域，看不到内容-->
<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><!--身体可视区域-->
<div id="mydiv" class="mydiv">
</div>
</body>
</html>
image.png
案例3
<html>
<head><!--头部: 不可视区域，看不到内容-->
<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><!--身体可视区域-->
<div id="mydiv" class="mydiv">
</div>
</body>
</html>
image.png
案例4
<html>
<head><!--头部: 不可视区域，看不到内容-->
<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) /*旋转180度*/
}
</style>
</head>
<body><!--身体可视区域-->
<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)
