13 JavaScript關於prototype（超重點） prototype是js裡面給類增加功能擴展的一種模式. 寫個面向對象來看看. ```js function People(name, age){ this.name = name; this.age = age; this.run = f ...
邊框和圓角
邊框
CSS中用border 定義邊框屬性。
border語法：border:[寬度][樣式][顏色]
其中：
-
寬度：邊框的寬度，單位可以使px、em、rem 等單位，也可以使用thin、medium、thick 三種預設值
-
樣式：邊框的樣式，值可以是 solid(實線),dashed(虛線),dotted(點線)等多種樣式。
樣式值 意思 solid 實線 dashed 虛線 dotted 點狀線 -
顏色：邊框的顏色，可以使用顏色的英文名稱、十六進位值、RGB、RGBA等多種方式來指定
示例
創建一個寬度為1px，線型為實線， 顏色為紅色邊框的盒子。
<style>
.box {
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid red;
}
</style>
<body>
<div class="box"></div>
</body>
單獨表示 邊框的寬度、線型、顏色
border 三要素可以拆分成小屬性進行替換。
border-width: 邊框的寬度。border-style: 邊框的樣式（線型）。border-color: 邊框的顏色。
示例
border-width: 2px;
border-style: dashed;
border-color: blue;
單獨表示每個方向的邊框
border 屬性可以通過指定四個方向的值，來分別表示每個邊框的樣式。
| 屬性 | 意義 |
|---|---|
| border-top | 上邊框 |
| border-right | 右邊框 |
| border-bottom | 下邊框 |
| border-left | 左邊框 |
四個邊框的屬性演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>演示四個邊框屬性</title>
<style>
.box1 {
width: 100px;
height: 100px;
border-top: 2px solid red;
border-bottom: 3px dotted green;
border-left: 3px dashed yellowgreen;
border-right: 2px solid #89d8de;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
每個邊框的樣式、線型和顏色單獨指定
CSS中關於邊框的設置還有更細粒度的屬性。
以下屬性可以分別設置每個邊框的樣式、線型和顏色。
| 屬性 | 意思 |
|---|---|
| border-top-width | 上邊框寬度 |
| border-top-style | 上邊框線型 |
| border-top-color | 上邊框顏色 |
| border-right-width | 右邊框寬度 |
| border-right-style | 右邊框線型 |
| border-right-color | 右邊框顏色 |
| border-bottom-width | 下邊框寬度 |
| border-bottom-style | 下邊框線型 |
| border-bottom-color | 下邊框顏色 |
| border-left-width | 左邊框寬度 |
| border-left-style | 左邊框線型 |
| border-left-color | 左邊框顏色 |
舉例
在所有div標簽盒子的樣式確定好後，我們想微調 class=“box” 屬性的上邊框樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>邊框小屬性演示</title>
<style>
div {
width: 200px;
height: 200px;
border: 2px solid green;
}
.box {
border-top-width: 2px;
border-top-color: red;
border-top-style: dotted;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
去掉邊框
- border:none; 去掉盒子所有的邊框（預設值）。
- border-left:none: 去掉盒子左邊的邊框。
- border-top:none; 去掉盒子的上邊框。
- border-right:none; 去掉盒子的右邊框。
- border-bottom:none; 去掉盒子底部的邊框。
舉例
去掉盒子的左邊框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>去掉盒子的左邊框</title>
<style>
div {
width: 200px;
height: 200px;
background-color: orange;
border: 3px solid red;
}
.box {
border-left: none;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
圓角
CSS中用 border-radius 屬性設置圓角 ， 常用單位：px、百分比等。
語法:
# 如果只指定一個值，表示四個角都使用該值。
border-radius: 10px;
# 如果有兩個值， 第一個值作用在左上角 和 右下角 ， 第二個值作用在 右上角 和 左下角
border-radius: 20px 50px;
# 如果有三個值， 第一個值作用在左上角 ，第二個值作用在右上角 和 左下角 ， 第三個值適用於右下角
border-radius: 15px 50px 30px;
# 如果有四個值， 第一個值 左上角， 第二個值 右上角， 第三個值 右下角 ， 第四個值適用於左下角
border-radius: 15px 50px 30px 5px
在一個正方形盒子中，當我們使用如下的屬性的時候
border-radius: 10px;
其實我們就構建除了一個半徑為 10px 的圓形。
給一個正方形盒子設置圓角為百分比 50% ，就可以得到一個圓形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>圓角百分比表示</title>
<style>
.box {
height: 100px;
width: 100px;
border: 1px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
單獨設置某個角
| 屬性 | 意義 |
|---|---|
| border-top-left-radius | 左上角 |
| border-top-right-radius | 右上角 |
| border-bottom-left-radius | 左下角 |
| border-bottom-right-radius | 右上角 |
微信公眾號
