整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
標
表格可以說是網頁必備的元素之一，但是原生的表格樣式都是很丑，列如表格加入邊框的默認情況下，單元格與單元格之間有一定的空隙；設置單元格邊框間距等等，都是可以通過css來設置自己的默認樣式
默認情況下，表格有邊框的情況下，內部看似有一層填充物，其實是表格的外邊框和內部單元格的間距。
這層間距是可以通過表格的標簽屬性進行設置，讓它看起來像是合并了一樣，但是這樣的合并并不完美，會得到一個很粗的邊框。
理想中的邊框合并，應該達到exelce表格那樣，是一個細線表格。Css專門有個屬性是為了表格邊框合并服務的。
語法：border-collapse：屬性值
屬性值
會發現，通過css控制合并和通過標簽屬性合并的效果都不一樣，通過css控制的效果跟exelce表格一模一樣，屬于細線表格。
對比圖
如果想自己設置表格邊框的間距，一樣是可以通過css來控制。
語法：border-spacing:像素值;
這個屬性可以設置兩個值。指定了1個像素值時，這個值將作用于橫向和縱向上的間距；當指定了2個length值時，第1個作用于橫向間距，第2個作用于縱向間距。
兩個值
邊框被拉大
單元格之間的距離也是一樣的。
表格的標題不一定都是設置在表格的上方，也有可能是設置在下方。
可以使用css來定義表格標題的位置
語法：caption-side:屬性值;
屬性值
這樣就可以得到一個倒置標題的表格
標題倒置
從事web前端開發的你，寫移動端項目時，發現沒移動端css里面寫了1px, 實際看起來比1px粗1px邊框問題，就是說你給border的css寫個1px，但在手機上卻變粗了顯示成2px，因為自從retina屏以來，不同的手機又不同的像素密度，css中的1px并不等于移動設備中的1px，所以會出現移動端css1px邊框兼容性問題。
移動端css1px邊框兼容性解決方法：在你的移動端項目中引入一個border.css就可以很好的解決這個問題了，我們來看下它的css樣式：
@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
content: "\0020";
overflow: hidden;
position: absolute;
}
/* border
* 因，邊框是由偽元素區域遮蓋在父級
* 故，子級若有交互，需要對子級設置
* 定位 及 z軸
*/
.border::before {
box-sizing: border-box;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
left: 0;
width: 100%;
height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
top: 0;
width: 1px;
height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
border-top: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
border-right: 1px solid #eaeaea;
transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
border-bottom: 1px solid #eaeaea;
transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
border-left: 1px solid #eaeaea;
transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
/* 默認值，無需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
.border::before {
width: 200%;
height: 200%;
transform: scale(.5);
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
transform: scaleY(.5);
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
transform: scaleX(.5);
}
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
.border::before {
width: 300%;
height: 300%;
transform: scale(.33333);
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
transform: scaleY(.33333);
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
transform: scaleX(.33333);
}
}
border.css下載地址： http://tangjiusheng.com/d/file/liulanqijianrongxing/2019-06-21/border.css
原文地址：http://tangjiusheng.com/liulanqijianrongxing/174.html
篇文章主要講述了CSS樣式更改中的背景Background，這篇文章我們來談談字體設置Font&邊框Border的基礎用法。
<div style='font-family: sans-serif normal'></div>
可用字體：
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier<div style='font-style:normal'></div>
文本傾斜:
normal 文本正常顯示
italic 文本斜體顯示
oblique 文本傾斜顯示<div style='font-variant:small-caps'></div>
normal 顯示標準字體。
small-caps 顯示小型大寫字母的字體。<div style='font-weight:normal'></div>
normal 標準的字符
bold 粗體字符
bolder 更粗的字符
lighter 更細的字符
也可以使用數字表示，范圍為100~900<div style='font-size:60px'></div>
smaller 變小
larger 變大
length 固定值
而且還支持百分比首先說一下邊框風格，它的風格比較多，常用的一般是實線為主：
<div style='border-style:none'></div>
hidden 隱藏邊框
dotted 點狀邊框
dashed 虛線邊框
solid 實線邊框
double 雙線邊框
groove 3D凹槽邊框
ridge 3D壟狀邊框
inset 3D inset邊框
outset 3D outset邊框
邊框也有四面，所以也會有上下左右
所以有時候為了更精確定位并修改樣式可以使用：
border-top-style 上邊框樣式
border-right-style 右邊框樣式
border-bottom-style 下邊框樣式
border-left-style 左邊框樣式先定義邊框的寬度 風格和顏色，然后定義邊框的其它屬性。
<div style='border-radius:25px;'></div>2).邊框陰影
<div style='box-shadow:1px 2px 2px 2px red'></div>
參數含義：
邊框各個方向的大小和顏色3).邊框圖片
<div style='border-image:url(1.png) 30 30 10 round'></div>
參數含義：
邊框圖片的路徑
圖片邊框向內偏移
圖片邊框的寬度
邊框圖像區域超出邊框的量
圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。這篇文章主要介紹了CSS樣式更改篇中的字體設置Font&邊框Border設置，希望讓大家對CSS選擇器有個簡單的認識和了解。
****看完本文有收獲？請轉發分享給更多的人****
IT共享之家
想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
