整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
CSS中用border 定義邊框屬性。
border語法：border:[寬度][樣式][顏色]
其中：
示例
創建一個寬度為1px，線型為實線， 顏色為紅色邊框的盒子。
<style>
.box {
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid red;
}
</style>
<body>
<div class="box"></div>
</body>border 三要素可以拆分成小屬性進行替換。
示例
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>舉例
去掉盒子的左邊框
<!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 | 右上角 |
css中一般用border來表示邊框。
首先設置一個寬500像素，高500像素的方框，把它的背景色設置為紅色red。
我們給他加上邊框，設置10像素、實心的顏色設置為藍色。瀏覽器打開樣式如下。
加入邊框的顯示效果
邊框除了這種組合寫法外，還可以分別設置它的屬性。看下面代碼，顯示效果和上面一樣。
border-width 邊框寬度。
border-style 邊框樣式 solid 實線 dashed虛線 dotted點線 等等。
border-color 邊框顏色 可以用英文單詞、十六進制、rgb表示
邊框樣式為虛線的效果
邊框的大小可以設置一樣大，也可以分別設置四個邊的大小，設置四個邊的順序一般為：上、右、下、左
上面代碼中 top代表上為10像素，right代表右為30像素，bottom代表下為60像素，left代表左為90像素。
四個邊的大小可以分別設置為，它的顏色也可以設置為多種樣色
當我們把背景寬 高設為0像素，把四個邊框設為200像素，就會看到四個三角形。
border-radius：100px 是設置圓角的屬性。
設置為100像素，就會變成圓形
設置為50像素
transparent 是一個透明的效果
我們把邊框的右邊設置為transparent 右邊框就會變成透明，看不到以前的黃色。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
