边框属性
在HTML中有很多元素都有边框属性,比如img元素、块级标签元素等。css常用边框属性如下:
| 属性 | 说明 |
|---|---|
| border | 在一个声明中设置所有边框属性 |
| border-width | |
| border-style | 主要有dotted 、solid 、double、dashed; |
| border-color | |
| border-radius | 边框圆角 |
| border-left | |
| border-left-color | |
| border-left-style | 样式 |
| border-left-width | 控制左边框宽度 |
| border-top-left-radius | 上左边框圆角 |
| border-bottom-right-radius | 右下边框圆角 |
边框有上 右 下 左 /top right bottom left
更多属性情参考：
http://www.runoob.com/css/css-border.html
注意事项目
在边框样式中
1、style 一定要放在 边框值后面
错误代码如下：
.myimg{
width:80px;
height:80px;
padding:4px;
border-style:double;
border:7px;
border-color:#ffcc00;
}
正确写法代码如下：
.myimg{
width:80px;
height:80px;
padding:4px;
border:7px;
border-style:double;
border-color:#ffcc00;
}
2、边框为双实线的时候 border 要大于2px才会显示
上课案例：
<!DOCTYPE html>
<html>
<head>
<title>边框样式demos</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 150px;
height: 150px;
border: 3px blue solid;
/*border-color: blue;
border-style: solid;*/
border-radius: 20px;
}
img{
border: 20px;
/*border-left: 1px;
border-right: 5px;
border-top: 10px;
border-bottom: 5px;*/
/*border-color: red;*/
border-left-color: blue;
border-right-color: pink;
border-top-color: yellow;
border-bottom-color: red;
border-left-style: solid;
border-right-style: dotted;
border-bottom-style: double;
border-top-style: dashed;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 40p
}
</style>
</head>
<body>
<div>aabbccdd</div>
<img src="imgs/head.jpg">
</body>
</html>
设置元素周围的轮廓
参考链接：
http://www.runoob.com/cssref/pr-outline.html
背景属性
网页背景除了使用颜色同样可以使用图片，css提供想着属性来对背景图片进行精确的控制，常用属性如下
background
background-attachment
设置背景图像是否固定中者随着页面的其余部份滚动，主要有fixed和 scroll两个值
更多属性参考：
http://www.runoob.com/css/css-background.html
上课案例代码：
请参考
<!DOCTYPE html>
<html>
<head>
<title>边框案例</title>
<style type="text/css">
body{
background-image: url("back_img1.png");
background-repeat: no-repeat;
background-attachment:fixed;
background-position:top center;
}
div{
width:80px;
height:80px;
border:5px #ffcc00 double;
border-top-left-radius:15px;
border-bottom-right-radius:15px;
}
.myimg{
width:80px;
height:80px;
padding:4px;
border-left:3px;
border-left-style:double;
border-color:#ffcc00;
}
a{
border: 2px;
border-color: #ffcc00;
border-style: double;
}
</style>
</head>
<body>
<div>aaggcc</div>
<img class="myimg" src="default_head.png" >
<a href="#">aabbc</a>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
</body>
</html>
