整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
習HTML時有時候我們需要用代碼設置邊框或虛線邊框的樣式，那該怎么設置呢？下面上海非凡進修學院HTML5開發培訓機構大咖分享下html虛線邊框設置教程，會對幾個不同標簽加虛線邊框效果樣式，同學們可以根據示例靈活掌握與應用到自己DIV+CSS布局中。
為了對html不同標簽加邊框虛線，我們選擇幾個常用標簽對齊設置邊框虛線效果。
1、html常用標簽
div標簽
span
ul li
table tr td
2、實例用到CSS屬性單詞
border
width
height
3、實現虛線的CSS重點介紹
border為邊框屬性，如果要實現對象邊框效果，要設置邊框寬度、邊框顏色、邊框樣式（實線還是虛線）
border:1px dashed #F00 這個就是設置邊框樣式寬度為1px，虛線，虛線為紅色。
4、實例描述
我們對以上幾個標簽設置相同寬度、相同高度、邊框效果。
5、HTML代碼示例：
以上示例對html中不同標簽設置相同的樣式，包括相同邊框虛線。
上海HTML5開發培訓機構大咖提示邊框三個樣式
通常我們可以對邊框設置寬度（厚度）、邊框樣式、邊框顏色這三個屬性與參數。
1）、邊框顏色：border-color:#000
2）、邊框厚度（寬度）：border-width:1px
使用數字+單位設置邊框厚度寬度，如1px(邊框厚度寬度為1像素)，邊框必須為正數字，大于0的數值。否則設置邊框border樣式無效。
3）、border邊框樣式：border-style:solid
上海HTML5開發培訓機構大咖提示：邊框border樣式值如下：
none :無邊框。與任何指定的border-width值無關
hidden : 隱藏邊框。IE不支持
dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線（常用）
dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線（常用）
solid :實線邊框（常用）
double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值
groove : 根據border-color的值畫3D凹槽
ridge :根據border-color的值畫菱形邊框
inset : 根據border-color的值畫3D凹邊
outset : 根據border-color的值畫3D凸邊
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
邊框可以是圖片img，也可以是div元素，也可以是table，也可以是span
一、邊框樣式的三要素：
1、邊框的寬度 border-width
2、邊框的外觀 border-style
3、邊框的顏色 border-color
二、邊框屬性
語法：
border-width：像素值；
border-style: 屬性值；none 無樣式、dashed虛線、solid實線
border-color:關鍵字或者RGB值。舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
div
{
width=100px;
height=50px;
}
#div1
{
border-width: 2;
border-style: solid;
border-color:red;
}
</style>
</head>
<body>
<div id=div1>你好，嘻嘻</div>
<div>你好，嘻嘻</div>
</body>
</html>
邊框三個屬性簡寫
語法：
border:1px solid red;
等價于
border-width:1px;
border-style: solid;
border-color:red;舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
div
{
border: 1px solid red;
}
</style>
</head>
<body>
<div>你好，嘻嘻</div>
</body>
</html>
三、局部樣式
一個框有四個邊，如果想單獨設置一個邊就需要單獨設定
1、上邊框border-top
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
簡寫為：
border-top: 1px solid red;2、下邊框border-bottom
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
簡寫為：
border-bottom: 1px solid red;
3、左邊框border-left
border-left-width: 1px;
border-left-style: solid;
border-left-color: red;
簡寫為：
border-left: 1px solid red;4、右邊框border-right
border-right-width: 1px;
border-right-style: solid;
border-right-color: red;
簡寫為
border-right: 1px solid red;整體舉例
建企業網站時使用CSS邊框圓角是很容易的事，但要設置邊框圓角的漸變效果就需要費些功夫了，需要正確理解幾個CSS屬性的含義，background-origin,background-clip,background-size這幾個是必須用到的，調整好性能的數值就可以靈活運用了。
想要實現CSS圓角漸變并匹配內容背景圖可以參考以下代碼：
<style>
div {
width: 500px;
height: 300px;
margin: 10px;
padding: 30px;
border-radius: 50px; /*設置圓角*/
border:50px solid transparent; /*設置邊框顏色透明，確保背景漸變色顯示*/
background-origin:border-box; /*從邊框開始背景圖*/
background-clip:padding-box,border-box; /*設置第一個背景和第二個背景的范圍*/
background-size:cover;
/*由于背景圖像不能設置純色，所以可以使用下面的方式設置純色*/
background-image:linear-gradient(#fff, #fff),linear-gradient(#FC0, #F30);
}
.a1{display:block;height:280px;background-image:url(/images/school.jpg);
background-repeat:no-repeat;background-size:contain;}
</style>
<div>
<span class="a1">邊框漸變色從內邊框到邊框，背景圖像單獨設置不重復。</span>
</div>background-origin表示的是背景起始位置，其三個值如下，依次是
border-box 從邊框開始；
padding-box(默認) 從內邊距開始；
content-box 從內容開始。
background-origin: border-box | padding-box(默認) | content-box
background-clip表示的是背景填充位置，其四個值如下，依次是
border-box(默認) 填充至邊框；
padding-box 填充至內邊距；
content-box 填充之內容；
text 作為字體前景色。
background-clip: border-box(默認) | padding-box | content-box | text
background-size表示的是背景尺寸，其五個值如下，依次是
contain 將圖像擴大至適應最短的邊，剩余部分默認重復圖像
cover 將圖像擴大至適應最長的邊，圖像可能顯示不完整
length 兩個值依次設置圖像寬和高，未設置則為auto
percentage 兩個百分比依次設置圖像寬和高，未設置則為auto
auto 默認設置
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
