整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ss3實(shí)現(xiàn)鋸齒狀背景邊框，適合用在網(wǎng)頁中的優(yōu)惠券展示欄和官網(wǎng)的欄目展示
效果：
如何實(shí)現(xiàn)
html代碼：
css樣式：
<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
二、邊框?qū)傩?/p>
語法：
border-width：像素值；
border-style: 屬性值；none 無樣式、dashed虛線、solid實(shí)線
border-color:關(guān)鍵字或者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>
邊框三個(gè)屬性簡寫
語法：
border:1px solid red;
等價(jià)于
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>
三、局部樣式
一個(gè)框有四個(gè)邊，如果想單獨(dú)設(shè)置一個(gè)邊就需要單獨(dú)設(shè)定
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;整體舉例
素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。
CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。
border-style屬性用來定義邊框的樣式。
border-style的值：
（1）編輯代碼
打開記事本，編寫其代碼，并保存為HTML格式文件。代碼如下。
（2)在瀏覽器中瀏覽效果
在瀏覽器中瀏覽效果如圖所示。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
