整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
背景知識：box-shadow，outline
鑒于使用場景的多元化，多重邊框的設計越來越多，以往可以借助 border-image 屬性應付一下，但是這個在css 代碼層面并不是很靈活。現在我們借助 box-shadow 和 outline 兩個屬性來分別實現多重邊框。
1、box-shadow 方案
思路：利用 box-shadow 的第四個參數（擴張半徑）的大小，多重投影
代碼示例：
<div class="border-multiple">
多重邊框實現方案一：box-shadow
</div>
.border-multiple {
margin: 50px auto;
padding: 20px;
width: 600px;
background-color: #fff;
box-shadow: 0 0 0 10px #f0f,
0 0 0 15px #00f,
0 2px 15px 15px rgba( 0, 0, 0, .8);
}
多重邊框--box-shadow
小結：
1、陰影并不影響布局，也不會受到box-sizing的影響
2、支持逗號分隔語法，可以創建任意數量的投影
3、缺點：只能實現實線的邊框，不能實現其他樣式的邊框
2、outline 方案
代碼示例：
<div class="border-outline">
多重邊框實現方案二：outline
</div>
.border-outline {
margin: 200px auto;
padding: 20px;
width: 600px;
background-color: #ff0;
outline: 3px dashed #0f0;
outline-offset: -10px;
}
多重邊框--outline
小結:
1、前提是實現兩層邊框
2、可能需要 outline-offset 的屬性值
3、outline 的描邊默認是矩形，當有圓角時會認為是 bug , 不能貼合圓角
4、不支持逗號語法
我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
背景知識：box-shadow，outline
為了解決上面例子小結3中的bug，可以用box-shadow 擴張半徑來填補掉 圓角與outline 之間的空隙。
代碼示例：
<div class="inner-rounding">
需要借助 box-shadow、outline、“多重邊框”來實現
注意點 ： box-shadow 的擴展半徑應該是 圓角半徑的 0.5倍
</div>
.inner-rounding {
background-color: #ccc;
margin: 50px auto;
padding: 20px;
width: 600px;
padding: 20px;
border-radius: 20px;
box-shadow: 0 0 0 10px #f00;
outline: 10px solid #f00;
}
注意點 ： box-shadow 的擴展半徑應該是 圓角半徑的 0.5倍；嚴格來說應該是(√2 - 1) 倍，這里取 0.5 倍是為了更好的計算
邊框內圓角
背景知識：rgba 或 hsla 顏色屬性，background-clip
思路：讓邊框呈現在 被裁剪背景的 padding-box 里
代碼示例：
<div class="border-opacity">
半透明邊框的實現
</div>
.border-opacity {
margin: 50px auto;
padding: 20px;
width: 600px;
border: 10px solid hsla(0, 0%, 100%, 0.5);
background-color: #fff;
background-clip: padding-box;
}
小結：
半透明邊框的實現需要借助css3的 background-clip 的屬性
background-clip有三個屬性：
1、border-box: 背景被裁剪到邊框盒（看不到邊框）
2、padding-box: 背景被裁剪到內邊距框（可以看見邊框）
3、content-box: 背景被裁剪到內容框（邊框緊貼著內容）
半透明邊框效果圖
背景知識：css 漸變，基本的border-iamge，background-clip
先來看看 border-image 是如何來實現 圖像邊框的:
border-image 的實現原理是九宮格伸縮法：把圖片切割成九塊，然后把它們應用到元素邊框相應的邊和角。
代碼示例：
<p class="border-image">border-image 的實現原理是九宮格伸縮法：把圖片切割成九塊，然后把它們應用到元素邊框相應的邊和角。</p>
<p class="border-image">我們并不想讓圖片的某個特定部分固定在拐角處；而是希望出現在拐角處的圖片區域是隨著元素寬高金額邊框厚度的變化而變化的。</p>
.border-image {
border: 40px solid transparent;
border-image: 33.334% url("http://csssecrets.io/images/stone-art.jpg");
padding: 1em;
max-width: 20em;
font: 130%/1.6 Baskerville, Palatino, serif;
}
.border-image:nth-child(2) {
margin-top: 1em;
border-image-repeat: round;
}
border-image 效果圖
缺點：我們并不想讓圖片的某個特定部分固定在拐角處；而是希望出現在拐角處的圖片區域是隨著元素寬高金額邊框厚度的變化而變化的。
如何解決呢？
實現思路：
1、利用 css 漸變和背景的擴展
2、在背景圖片上，在疊加一層純白的實色背景
3、為了讓下層的背景透過邊框區域顯示出來，需要給兩層背景指定不同的 background-clip 值
4、在多重背景的最底層設置背景色，需要用一道從白色過渡到白色的 css 漸變來模擬出純白色實色背景的效果
代碼示例：
<p class="contituous-images">實現思路：
1、利用 css 漸變和背景的擴展
2、在背景圖片上，在疊加一層純白的實色背景
3、為了讓下層的背景透過邊框區域顯示出來，需要給兩層背景指定不同的 background-clip 值
4、在多重背景的最底層設置背景色，需要用一道從白色過渡到白色的 css 漸變來模擬出純白色實色背景的效果
</p>
.contituous-images {
padding: 1em;
border: 1em solid transparent;
/* background: linear-gradient(white, white),
url(http://csssecrets.io/images/stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box; */
/* background 還可簡寫如下 */
background: linear-gradient(white, white) padding-box,
url(http://csssecrets.io/images/stone-art.jpg) border-box 0 / cover;
width: 21em;
padding: 1em;
overflow: hidden;
/* 邊框可拖拽 */
resize: both;
font: 100%/1.6 Baskerville, Palatino, serif;
}
連續的圖像邊框
還可以通過漸變圖案實現信封樣式的邊框
代碼示例：
<p class="envelope-border">還可以通過 漸變圖案實現 信封樣式的 邊框</p>
.envelope-border {
padding: 1em;
border: 0.5em solid transparent;
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 3em 3em;
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;
}
信封邊框效果圖
作者：貴在隨心
鏈接：https://www.jianshu.com/p/273e77cb99c6
. block(區塊)
block面板主要是設置對象文本的文字間距、對齊方式、上標、下標、排列方式、首行縮進等。
(1)word-spacing：設置單詞之間的間距。可以設置負值。
默認值:normal
(2)letter-spacing：設置字符之間的間距。可以指定負值。因為中文也是字符, 這個參數可以設置文字間的間距。
默認值:normal
(3)vertical-align：指定元素的垂直對齊方式。針對<td>表格設置垂直對齊方法,但是對<div>設置無效,可以將display屬性設置為table-cell值;
可以指定sub(下標)、super(上標)、top(與頂端對齊)、middle(居中)、bottom(與底端對齊)等。適用于行內塊元素 img、input、td等
baseline 默認。元素放置在父元素的基線上。
sub 垂直對齊文本的下標。
super 垂直對齊文本的上標
top 把元素的頂端與行中最高元素的頂端對齊
text-top 把元素的頂端與父元素字體的頂端對齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對齊。
text-bottom 把元素的底端與父元素字體的底端對齊。
% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit 規定應該從父元素繼承 vertical-align 屬性的值。
默認值: baseline
(4)text-align：設置文本的排列方式(適用于行內元素和行內塊元素, 如 a、span、input、img、label等元素)。left(左對齊)、right(右對齊)、center(居中)、justify(兩端對齊)。也可用于<hr/>下劃線對齊方式
默認值： 如果 direction 屬性是 ltr, 則默認值是 left；如果 direction 是 rtl，則為 right。(關于CSS direction 屬性看下面的內容介紹)
text-align 和margin auto 區別
text-align 可以讓塊級元素里面的文字內容居中對齊.
文字內容==(圖片 input 行內元素 行內塊元素)
但是對于里面的塊級元素無效
讓一個塊級元素居中對齊 ： margin:0 auto;
(5)text-indent：設置文本第一行的縮進值。負值用于將文本第一行向外拉, 主要給<p>設置首行。
要在每段前空兩格,可設置為2em，因為em是當前字體尺寸，2em就是兩個字的大小。
默認值： not specified(沒有規定的)
p{font-size:12px;text-indent:2em;}上述代碼就是可以實現段落首行縮進24px(也就是兩個字體大小的距離)。
(6)white-space：設置如何處理元素內的空白符。有三個選項可選：
normal 會將空白符全部壓縮；
pre 則會如同處理pre標簽內的文本一樣處理這些空白符,也就是說，所有的空白符，包括空格，標簽，回車，等都會得以保留；
nowrap 指定文本只有遇到br標簽時才換行。
默認值: normal
(7)display: none 此元素不會被顯示。
block 此元素將顯示為塊級元素，此元素前后會帶有換行符。
inline 默認值。此元素會被顯示為內聯元素，元素前后沒有換行符。
inline-block 行內塊元素。(CSS2.1 新增的值)
list-item 此元素會作為列表顯示。
run-in 此元素會根據上下文作為塊級元素或內聯元素顯示。
compact CSS 中有值 compact，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。
marker CSS 中有值 marker，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。
table 此元素會作為塊級表格來顯示(類似 <table>)，表格前后帶有換行符。
inline-table 此元素會作為內聯表格來顯示(類似 <table>)，表格前后沒有換行符。
table-row-group 此元素會作為一個或多個行的分組來顯示(類似 <tbody>)。
table-header-group 此元素會作為一個或多個行的分組來顯示(類似 <thead>)。
table-footer-group 此元素會作為一個或多個行的分組來顯示(類似 <tfoot>)。
table-row 此元素會作為一個表格行顯示(類似 <tr>)。
table-column-group 此元素會作為一個或多個列的分組來顯示(類似 <colgroup>)。
table-column 此元素會作為一個單元格列顯示(類似 <col>)
table-cell 此元素會作為一個表格單元格顯示(類似 <td> 和 <th>)
table-caption 此元素會作為一個表格標題顯示(類似 <caption>)
inherit 規定應該從父元素繼承 display 屬性的值。
默認值： inline
常用的屬性:
display:none; //隱藏
display:block //顯示(將行內元素轉換為塊元素)
dispaly:inline //將塊元素轉換行內元素
dispaly:inline-block //將塊元素轉換為行內塊元素
display:table-cell; //此元素會作為一個表格單元格顯示(類似 <td> 和 <th>) 用于多行文本、塊元素垂直居中以上轉換涉及行內塊元素(img、input)轉換;
經過大量的測試證明：屬性display是不能用于轉換行內塊元素(img、input)
同義詞: 內聯元素(行內元素)
4. box(方框或盒子) 主要針對圖片、表格、層、段落(p)、標題(h1-h6)等
box面板主要設置對象的邊界、間距、高度、寬度、和漂浮方式等。
(1)width：定義元素的寬。
默認值:auto
(2)height：定義元素的高。
默認值:auto
以上width、height屬性如果是針對div標簽設置css樣式，則與定位設置窗口width、height屬性一致(Dreamweaver會自動填充數據)
在父元素和子元素都設置了高度和寬度的情況下：
如果子元素的寬度超出了它的父元素的寬度, 則會父元素不會限制其顯示寬度;
如果子元素的高度超出了它的父元素的高度, 則會父元素不會限制其顯示高度;
(3)float：定義元素的漂浮方式。left 表示對象浮在左邊、right表示對象浮在右邊、none 表示對象不浮動。
默認值:none
一個span標簽不需要轉成塊級元素, 就能夠設置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經不區分行內、塊了。
也就是說, 一旦一個元素浮動了, 那么, 將能夠并排了, 并且能夠設置寬高了。無論它原來是個div還是個span。
span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
(4)clear：不允許元素的漂浮，相對于前一個<div>設置浮動時，下一個有清除設置的元素就會移到它的下面。
left表示不允許左邊有浮動對象 right表示不允許右邊有浮動對象
none 表示允許兩邊都可以有浮動對象 both 不允許有浮動對象。
默認值:none
浮動的主要作用是將塊元素排在同一行(span也可以設置浮動);
浮動元素它會向左或者向右進行浮動, 所謂浮動可以理解"飄";
浮動元素向它遇到父元素的邊框就停止浮動;
浮動元素的層級會比普通元素要高, 并且它不會再占用原有的高度;
浮動元素只會影響后面的元素, 不會影響前面的元素：
浮動元素的后面的元素(可能是一個也可能是多個元素受到影響)也會繼承浮動元素的特性, 它也會浮動了要解決這個問題有兩辦法;
第一個：需要清除浮動
第二個：給父元素設置一個高度(子元素都設置了height高度條件下), 不建議使用
清除浮動后它不會影響到它后面的元素, 父元素會將所有的浮動元素包圍者
當然浮動元素對后面的元素的影響可以做首字母方法, 圖文混排(文字環繞圖片)等特效；
(5)padding：定義元素內容與其邊框的空距(如果元素沒有邊框就是指頁邊的空白)。
可以分別設置分別設置上、右、下、左內邊距。
padding-top
padding-right
padding-bottom
padding-left
p {padding:20px} 設置設置上、右、下、左內邊距都為20px
p {margin: 20px 30px 30px 20px;} 設置padding-top padding-right padding-bottom padding-left分別為20px 30px 30px 20px
默認值：0。
要懂得, 用小屬性層疊大屬性：
padding: 20px;
padding-left: 30px;
注意：大屬性要寫在前面, 小屬性寫在后面;
比如：
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}padding-left:10px和padding-right:20px沒用, 因為后面的padding大屬性, 層疊覆蓋了。
(6)margin：定義元素的邊框與其他元素之間的距離(如果沒有邊框就是指內容之間的距離)。
可以分別設置上邊界、右邊界、下邊界、左邊界的值。
margin-top
margin-right
margin-bottom
margin-left
p {margin:20px}
p {margin:10px 0px 15px 5px;}
默認值：0
marign：上邊界值 右邊界值 下邊界值 左邊界值
margin屬性值必須按照上面順序進行排列,以空格分開。如果僅輸入一個值,則4個邊界值會同時設置為此值。
如果僅輸入兩個的值,則缺少的值會以對邊的設置值進行替代。例如：
div{margin:5px 10px 15px 20px} /*上=5px,右=10px,下=15px,左=20px*/
div{margin:5px} /*上=5px,右=5px,下=5px,左=5px*/
div{margin:5px 10px} /*上=5px,右=10px,下=5px,左=10px*/
div{margin:5px 10px 15px} /*上=5px,右=10px,下=15px,左=10px*/
5. border(邊框) 針對段落(p標簽)、圖片、表格、標題(h1-h6)、form、input等(幾乎所有的元素都可以設置邊框)
border面板可以設置對象邊框的寬度、顏色及樣式。
(1)border-width：設置元素邊的寬度。可以分別設定top(上邊寬)、right(右邊寬)、bottom(下邊寬)、left(左邊寬)的值。
border-top-width border-right-width border-bottom-width border-left-width
thin 定義細的邊框。
medium 默認。定義中等的邊框。
thick 定義粗的邊框。
length 允許您自定義邊框的寬度。
inherit 規定應該從父元素繼承邊框寬度。
默認值: medium
(2)border-color：設置邊框的顏色。你可以分別對每條邊設置顏色。
注意：我們可以通過設置不同的顏色做出亮邊和暗邊的效果，這樣元素看起來是立體的。
border-top-color border-right-color border-bottom-color border-left-color
默認值: not specified(未規定的)
(3)border-style：設置邊框樣式。
border-top-style border-right-style border-bottom-style border-left-style
可以設置為none(無邊框)、dotted(點線)、dashed(虛線)、solid(實線)、double(雙線)、
groove(凹槽,3D凹線)、ridge(凸槽,3D凸線)、inset(凹邊,3D嵌入線)、outset(凸邊,3D浮出線)等邊框樣式。
默認值:none(無邊框)
推薦：表單輸入框：inset(凹邊) 按鈕：outset(凸邊)
兼容性問題
比如, border:10px ridge red; 在chrome和firefox、IE中有細微差別：
如果公司里面的設計師, 處女座的, 追求極高的頁面還原度, 那么不能使用css來制作邊框。
就要用到圖片, 就要切圖了。所以, 比較穩定的就幾個：solid、dashed、dotted, 其他的邊框樣式盡量不要用。
border可以沒有： border: none;
某一條邊沒有： border-left: none;
也可以調整左邊邊框的寬度為0px： border-left-width: 0px;
注意：border-bottom-style：可以修改a鏈接的"下劃線"的風格
border-bottom-width：可以修改a鏈接的"下劃線"的寬度(粗細)
border-bottom-color：可以修改a鏈接的"下劃線"的顏色
節我們來學習邊框樣式，主要包括如何設置邊框的寬度、邊框的顏色、邊框的樣式等。當我們給某個元素設置邊框時，可以分為上下左右四個邊框，既可以同時設置四個邊框的樣式，也可以分開設置四個邊框的樣式。
關于邊框樣式的四個屬性：
border-width 屬性用于設置邊框的寬度，也就是邊框的粗細。
常用屬性值如下所示：
我們一般會使用 length 作為 border-width 屬性的屬性值，即設置邊框的粗細為多少像素，例如 1px、2px、3px 等。border-width 屬性可以同時為所有邊框設置寬度，也可以單獨地為每個邊框設置寬度。
示例：
為上、右、下、左四個邊框分別設置邊框粗細：
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
根據簡寫屬性 border-width，我們也可以直接寫成：
border-width:1px 2px 3px 4px;
記住在簡寫時，為邊框設置寬度的順序為 上、右、下、左，是順時針順序。
而當元素的上下邊框或左邊框的寬度一致時，也可以使用簡寫，例如上下邊框為1px、左右邊框為2px，可以寫成：
border-width:1px 2px;
border-style 屬性用于設置元素的邊框樣式。和 border-width 一樣，可以同時為四個邊框設置邊框樣式，也可以分別為每個邊框單獨設置邊框樣式。
border-style 的屬性值有很多個，但是在實際網頁制作中，常用屬性值有下面四種：
示例：
例如設置上、右、下、左的邊框樣式為實線、虛線、實線、虛線：
border-top-style:solid;
border-right-style:dashed;
border-bottom-style:solid;
border-left-style:dashed;
可以簡寫成：
border-style: solid dashed solid dashed;
當元素的上下邊框和左右邊框樣式一致時，也可以寫成：
border-style: solid dashed;
border-color 屬性可以用于設置邊框顏色。屬性值可以是任何合法的顏色值，例如顏色名、十六進制顏色值、RGB顏色值等。
border-color 屬性同樣可以同時設置四個邊框的顏色，也可以單獨設置四條邊框的顏色。
例如設置上、右、下、左邊框顏色為紅黃藍綠：
border-top-color:red;
border-right-color:yellow;
border-bottom-color:blue;
border-left-color:green;
可以簡寫為：
border-color:red yellow blue green;
上面我們講了 border-width、border-style、border-color 三個屬性，但是其實我們在實際應用中，一般不會單獨來設置邊框寬度或者顏色等，而是直接使用通過 border 簡寫屬性來設置所有的邊框屬性。
border 屬性可以直接設置所有邊框的樣式，如果要單獨設置每個邊框的樣式則可以使用 border-top、border-right、border-bottom、border-left。
將下面這個<div> 標簽的邊框設置成 3像素、虛線、紫色：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS學習(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div>設置一個邊框</div>
</body>
</html>
CSS 樣式代碼：
div{
width: 100px;
height: 100px;
border:3px dashed purple;
}
在瀏覽器中的演示效果：
鏈接：https://www.9xkd.com/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
