小編給大家分享一下CSS3怎么樣實現邊框，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
盒子模型之border
邊框相關屬性
border-width 控制邊框的大小 用長度賦值
border-style 控制邊框的樣式 none 沒有邊框 solid 實線 dotted 點線 dashed 虛線 double 雙線條
border-color 控制邊框的顏色 四種顏色表示法
border-top 控制上邊框的樣式
border-right 控制右邊框的樣式
border-bottom 控制下邊框的樣式
border-left 控制左邊框的樣式
其實四條邊也是復合屬性：
border-top可以分成這么幾個屬性：border-top-color border-top-width border-top-style ?。ㄊＯ氯龡l邊以此類推）
邊框連寫
理論上：沒有順序，皆可省略
案例：表格邊框、四彩盒子、表單邊框
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
width: 800px;
height: 300px;
border: 1px solid #000;
border-collapse: collapse;/*去掉邊框：細線*/
}
th,td {
border: 1px solid #000;
}
</style></head><body>
<table>
<caption><h4>今日小說排行榜</h4></caption>
<thead>
<tr>
<th>排名</th>
<th>關鍵詞</th>
<th>趨勢</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相關鏈接</th>
</tr>
</thead>
<tbody>
<tr >
<td >1</td>
<td >鬼吹燈</td>
<td ><img src="img/up.jpg" width="13" height="11" /></td>
<td >65589</td>
<td >45</td>
<td ><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盜墓筆記</td>
<td><img src="img/down.jpg" width="13" height="11" /></td>
<td>1</td>
<td>456</td>
<td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td>
</tr>
</tbody></table></body></html>Document
<!-- 四彩盒子 -->
<p></p></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">
input{
width:150px;
height:18px;
outline-style:none; /*取消藍色邊框*/
}.username{
border:1px dashed #ccc;
background-color:#E7EEFE;
color:blue;
}.username:focus{ /*獲得焦點的狀態*/
border:1px dashed pink;
background-color:#FFF7FB;
color:pink;
}.email{
border:0 none;
border-bottom:1px dashed red;
}.search{
border:1px solid #ccc;
color:#ccc;
background:url(search.png) no-repeat right center;
}</style></head><body>用戶名: <input type="text" class="username" /><br /><br />郵 箱: <input type="text" class="email"/><br /><br /><label for="txt">搜索一下</label>: <input type="text" id="txt" class="search" value="請輸入..." /></body></html>盒子模型之padding
內邊距：控制內容和邊框之間的距離
padding屬性和padding連寫
padding-top 上內邊距 padding-right 右內邊距 padding-bottom 下內邊距 padding-left 左內邊距
四種連寫
1 只寫一個值 padding : 10px; 代表四個方向都是第一個數字
2 寫兩個 padding : 10px 20px; 表示：上下內邊距等于第一個數字，左右內邊距等于第二個數字
3 寫三個 padding: 10px 20px 30px; 表示：上內邊距=第一個數字，左右內邊距等于第二個數字，下內邊距等于第三個數字
4 寫四個 padding: 10px 20px 30px 40px; 表示：上右下左分別對應各個數字
padding和border對盒子的影響
設置padding和border會對盒子的實際大小造成影響
盒子的實際寬度 = 設置在css里的寬度 + 水平的paddding + 水平的border
盒子的實際高度 = 設置的高度 + 垂直的padding + 垂直的border
但是是要注意：
如果是存在父子關系的時候
如果子盒子沒有設置寬度，并且子盒子的padding+border沒有超過父盒子的寬度，子盒子的寬度是不會改變的
如果子盒子的padding+border超過父盒子的寬度，會被padding和border撐開寬度
案例：
padding的作用、padding計算題
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
border: 1px solid #000;
width: 500px;
height: 500px;
padding: 10px;
}
</style></head><body>
<p>
我是盒子中的內容 </p></body></html><!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*問題：大盒子寬為500px，高為300px，
在大盒子正中心有一個小盒子
小盒子寬為300px，高為150px，
請用padding將結構寫出來 */
.father {
width: 300px;
height: 150px;
padding: 75px 100px;
background-color: red;
}
.son {
width: 300px;
height: 150px;
background-color: green;
}
</style></head><body>
<p class="father">
<p class="son"></p>
</p></body></html>盒子模型之margin
外邊距屬性和外邊距連寫
margin-top 控制盒子的上外邊距
margin-right 控制盒子的右外邊距
margin-bottom 控制盒子的下外邊距
margin-left 控制盒子的左外邊距
margin的連寫和padding是一樣的
垂直塌陷(合并)現象
當兩個盒子垂直分布，同時給兩個盒子設置了相對的margin值，兩個盒子之間的實際距離，取決于連個margin值中的最大
包含塌陷(合并)現象
當給子盒子設置margin-top的時候，有可能會把父盒子一起帶跑
如何解決：
1 、給父盒子設置邊框
2、給父盒子設置overflow：hidden
案例：列表顯示
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<style>
ul{
list-style:none;
}
ul li{
background:url(li.gif) no-repeat left 4px;
padding-left: 25px;
}
li a{
text-decoration: none;
}
a:hover{
color: #9E7878;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">大明星:姜潮魔性拜年道晚安</a></li>
<li><a href="#">軟萌正太徐浩演繹《小幸運》</a></li>
<li><a href="#">漫威絕逼好看的電影鏡頭合集</a></li>
<li><a href="#">從沒見過這么搞笑的祖孫組合</a></li>
<li><a href="#">史上最容易挨揍的自助餐吃法</a></li>
</ul>
</body></html>給行內元素設置margin和padding的問題
給行內元素設置margin-top和margin-bottom沒有效果
給行內元素設置垂直padding的時候，能夠增加高度，位置不會依賴于padding撐開的位置
以后給行內元素控制位置，不要用垂直的padding和margin
我們通常使用行高控制行內元素的垂直位置
margin：0 auto；的秘密
margin-left和maring-right同時是auto的時候，會讓子元素（塊級）居中顯示
能將設置了寬度的塊級元素相對于其父元素水平居中
通常會使用它來將頁面的版心居中
將行內元素和行內塊級元素居中
給容器設置text-align：center
以上是“CSS3怎么樣實現邊框”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
