邊框?qū)傩?/h2>
在HTML中有很多元素都有邊框?qū)傩?比如img元素、塊級(jí)標(biāo)簽元素等。css常用邊框?qū)傩匀缦?
| 屬性 | 說明 |
|---|---|
| border | 在一個(gè)聲明中設(shè)置所有邊框?qū)傩?/td> |
| border-width | |
| border-style | 主要有dotted 、solid 、double、dashed; |
| border-color | |
| border-radius | 邊框圓角 |
| border-left | |
| border-left-color | |
| border-left-style | 樣式 |
| border-left-width | 控制左邊框?qū)挾?/td> |
| border-top-left-radius | 上左邊框圓角 |
| border-bottom-right-radius | 右下邊框圓角 |
邊框有上 右 下 左 /top right bottom left
更多屬性情參考：
http://www.runoob.com/css/css-border.html
注意事項(xiàng)目
在邊框樣式中
1、style 一定要放在 邊框值后面
錯(cuò)誤代碼如下：
.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、邊框?yàn)殡p實(shí)線的時(shí)候 border 要大于2px才會(huì)顯示
上課案例：
<!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>
設(shè)置元素周圍的輪廓
參考鏈接：
http://www.runoob.com/cssref/pr-outline.html
背景屬性
網(wǎng)頁背景除了使用顏色同樣可以使用圖片，css提供想著屬性來對(duì)背景圖片進(jìn)行精確的控制，常用屬性如下
background
background-attachment
設(shè)置背景圖像是否固定中者隨著頁面的其余部份滾動(dòng)，主要有fixed和 scroll兩個(gè)值
更多屬性參考：
http://www.runoob.com/css/css-background.html
上課案例代碼：
請(qǐng)參考
<!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>
