整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<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;整體舉例
人可能會疑惑，我為什么專門用一節內容來說邊框和圓角。其實，不為別的，只為它們在開發中，在Web系統中，在手機頁面中，太常用了。有邊框的頁面，讓人耳目一新，一目了然；有圓角的內容，讓人賞心悅目，心曠神怡。說的有點夸張了，就這么著吧。
邊框(border)一般為長方形形狀，有上下左右四條邊，CSS邊框屬性允許你指定一個元素邊框的樣式和顏色。CSS的圓角(border-radius)方法，可給任何元素制作 "圓角"效果。
在CSS中，你可以通過border和其延伸的，如border-style，來實現邊框的效果。上邊框相關的有border-top-style樣式、border-top-color顏色、border-top-width寬度和組合了它們的border-top。下、左右邊框類似，換成對應的單詞即可。
邊框樣式(border-style)常用的有dotted(點線)、dashed(虛線)、solid(實線)、double(雙邊框)這四種，不常用的有groove(3D溝槽)、ridge(3D脊邊)、inset(3D嵌入)和outset(3D突出)。
/* --------在樣式表文件中---------- */
/*4條邊框一起設置*/
.four-border {
width: 800px;
border: 2px solid darkgreen;;
}
/*四條邊框可個性化*/
.four-style {
width: 800px;
/* 上、右、下、左*/
border-width: 1px 2px 3px 4px;
/*上、右左、下*/
border-style: solid dashed double;
/*上下和右左*/
border-color: darkgreen coral;
}
/*單條邊框設置*/
.one-style {
width: 800px;
border-top: 1px groove orangered;
border-bottom-width: 5px;
border-bottom-style: inset;
border-bottom-color: darkgreen;
}HTML文件內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>邊框逼格</title>
<link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
border統一設置四條邊框<br/>
順序為：border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
四條邊框一起設置，風格可不同<br/>
順序為:上、右、下、左。<br/>
1. 只有一個值(如：border-width:2px)：表示4條邊框全部一樣；<br/>
2. 有兩個值(如：border-width:2px 3px)：表示上下和右左;<br/>
3. 有三個值(如：border-width:2px 3px 1px)：表示上、右左、下;<br/>
4. 有四個值(如：border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
單獨一天邊框進行設置<br/>
border-top：頂部寬度、樣式、顏色，一起設置<br/>
border-top-width:上邊框寬度；<br/>
border-top-style:上邊框樣式；<br/>
border-top-color:上邊框顏色。
<br/>
</div>
</body>
</html>輸出結果
使用CSS的border-radius 屬性，你可以給任何元素制作 "圓角"。 border-radius統一指定4個圓角，順序為左上、右上、右下和左下。如果要特定指定某個角的話，用border-top-left-radius等方式即可。
在樣式表ys2.css文中的內容
/*4個角統一指定*/
.four-radius {
width: 800px;
line-height: 40px;
background: #8AC007;
border-radius: 15px;
vertical-align: middle;
text-align: center;
}
/*單獨指定一個角*/
.one-radius {
width: 800px;
line-height: 40px;
background: #8AC007;
border-top-left-radius: 15px;
border-bottom-right-radius: 50px;
vertical-align: middle;
text-align: center;
}在HTML文件中的內容
<br/><br/>
<div class="four-radius">
統一設置4個圓角<br/>
一個值： 四個圓角值相同;<br/>
兩個值: 左上角與右下角，右上角與左下角;<br/>
三個值: 左上角, 右上角和左下角，右下角;<br/>
四個值: 左上角，右上角，右下角，左下角。
</div>
<br/>
<div class="one-radius">
單獨指定某個角<br/>
border-top-left-radius：左上角;<br/>
border-top-right-radius：右上角;<br/>
border-bottom-right-radius：右下角;<br/>
border-bottom-left-radius：左下角。
</div>輸出結果
不要重復造輪子，所以好多程序員一遇到問題，就喜歡搜索，我也是，哈哈哈~。CSS有指定邊框的屬性，也有圓角的屬性，將其放在一起，是不是就可以實現圓角邊框?答案毋庸置疑，答案是肯定的。
在樣式表ys2.css文件中的內容
/*圓角邊框*/
.corners {
border-radius: 50px;
border: 3px solid #8AC007;
padding: 50px;
width: 720px;
line-height: 50px;
vertical-align: middle;
text-align: center;
}在HTML文件中的內容
<div class="corners">
邊框屬性和圓角屬性，組合成圓角邊框
</div>輸出結果
好了，有關CSS的圓角邊框內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。
一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。
#前端##HTML5##CSS##程序員##Web#
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
