CSS 样式修改技巧及心得汇总
相信你的眼睛，而不是數字！！！
結構要和樣式分離！！！
設置網頁的字體樣式：
html, body, div, p, h1, h2, h3, h4, h5, h6, select, input, li, legend {font-family: Arial, Helvetica, verdana, '微軟雅黑', sans-serif;}使div獨占一行：
display:block;選擇被用戶選取的部分：
::selection{為其設置樣式}單行文本的溢出顯示省略號(…)
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;使元素隱藏<不顯示>：
display:none;使文字溢出部分隱藏<不顯示>：
overflow:hidden;讓bootstrap默認下拉菜單二級和一級一樣寬：
.dropdown-menu{min-width: 100%;}改變bootstrap默認導航條縮小后三道杠的顯示顏色：
.navbar-toggle{background-color: black;}改變bootstrap導航欄默認的懸浮顏色及邊框：
.nav-tabs li a:visited{/*改變bootstrap默認懸浮顏色*/background-color: #f5f5f5;/*去掉bootstrap默認邊框*/border: 0; }CSS畫三角形：
.triangle{width: 0;height: 0;overflow: hidden;border-width: 10px;border-color: transparent transparent #0083ff transparent;border-style: dashed dashed solid dashed; }設置背景顏色為透明：
background-color: rgba(0,0,0,0);讓圖片在div中100%顯示：
.類名 img{width: 100%;}去掉鏈接<a標簽>默認hover的下劃線：
a:hover {text-decoration: none;}去掉li前面的圓點：
list-style:none;讓文字在div中水平居中顯示：
height: 20px;line-height: 20px;text-align: center;line-height 本身就可以起到設置高度的作用！！！
網站首頁全屏大圖可以設置如下屬性實現：
width: 100%; position: absolute; top: 0; padding: 0; z-index: -999;為文字添加下劃線：
{border-bottom: 1px solid #fff;} text-decoration: underline;把文字隱藏起來：
color: transparent鼠標指上去箭頭變為手型：
cursor:pointer;使a鏈接不能點擊：
pointer-events: none;強制文字不換行：
white-space:nowrap;為div畫xx像素的圓角：
border-radius:xxpx;樣式相同的標簽用class命名，統一定義管理。
可以預先用class定義好如：背景顏色<.red、.black等>、字體大小<.eighteen-px>.
多用類<class>命名，方便管理，不要用駝峰命名法！類名統一用小寫英文字母，中間用中橫線<->分開。
使圖片或XX漸變多少秒<s>后出現：
transition:3s;為總的div定義如下css,可以讓頁面整體居中：
margin:0 auto;按鈕或鏈接點擊時不出現藍色矩形區域：
*::selection{background:none;}讓DIV居中顯示：
{position: relative;left: 50%;transform:translateX(-50%) ;} position:absolute; left:50%; /* 定位父級的50% */ top:50%;<去掉后只有左右位移> transform: translate(-50%,-50%); /*自己的50% */讓圖片或DIV居中：<XX指圖片或DIV的一半>
1. position: relative;left: calc(50% - XXpx); 2. position: absolute;left: 50%;transform: translate(-50%,-50%);background-image圖片出現邊框是因為img標簽沒有設置src，顯示的是系統的沒有圖片的標記，并不是html代碼的問題。，設置一個空白圖/透明圖就可以了。
改變屏幕尺寸時，修改HTML對應CSS使頁面符合屏幕大小：
@media (max-width:1024px) { .service-img {width: 100%;padding: 0;} }?
使瀏覽器保留空白/空格：
white-space:preCss實現文字左右對齊：
.XXX p {text-align: justify;}連字符斷行：
p {-moz-hyphens: auto;-ms-hyphens: auto;-webkit-hyphens: auto;hyphens: auto;word-wrap: break-word;}得到一條從黃色到紅色的垂直漸變：
background: rgb(255, 128, 0); background: -moz-linear-gradient(0deg, yellow, red); background: -o-linear-gradient(0deg, yellow, red); background: -webkit-linear-gradient(0deg, yellow, red); background: linear-gradient(90deg, yellow, red);添加文字陰影：
text-shadow: h-shadow v-shadow blur color;注釋：text-shadow 屬性向文本添加一個或多個陰影。該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進行規定。省略的長度是 0。
添加盒子陰影：
box-shadow: h-shadow v-shadow blur spread color inset;注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
只要把半透明的黑色或白色疊加在主色調上，即可產生主色調的亮色和暗色變體：
hsla(0,0%,100%,.2),transparent為元素添加一道10px寬的邊框，但在左邊不加邊框可以這樣寫：<減少后期改動量>
border-width: 10px; border-left-width: 0;應用display: inline-block會讓元素根據內容來決定自身的尺寸
超鏈接的顏色設定為與頁面中其他文本相同：
a { color: inherit; }不要忘記為替換元素（比如 img、object、video、iframe 等）設置一個max-width，值為100%！
讓背景圖片完整地鋪滿一個容器：<在移動網頁中通過CSS 把一張大圖縮小顯示往往是不太明智的>
background-size: cover合理使用簡寫！如：用background代替background-color
如果只為某個屬性提供一個值，那它就會擴散并應用到列表中的每一項!!!
背景會被元素的裁切掉如：border box（邊框的外沿框）：
background-clip:border-box;多重投影(邊框)：
例如： box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink; 或： border: 10px solid #655; outline: 5px solid deeppink;用一張整合圖片為所有圖片服務：<一圖定全網>
香港網站示例： .Banking-layout .value-con .Banking-img7 {background-image: url(/images/pic/Service/Background-img/bg-img.jpg);height: 80px;width: 80px;} .Banking-layout .value-con .Banking-img7 {background-position: 240px 240px;}請不要忘記在calc() 函數內部的- 和+ 運算符的兩側各加一個空白符，否則會產生解析錯誤！
使文字單行顯示，多佘以省略號的形式出現：
xx {overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}條紋背景CSS寫法
1.橫向條紋背景CSS寫法：
如:background: linear-gradient(#fb3 50%, #58a 50%); background-size: 100% xxpx;2.豎向條紋背景CSS寫法：
background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0); background-size: xxpx 100%;3.斜向條紋背景CSS寫法：
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0); background-size: xxpx xxpx;4.任意角度條紋背景CSS寫法：<如60度>
background: repeating-linear-gradient(60deg,#fb3, #fb3 15px, #58a 0, #58a 30px);border-radius可以單獨指定水平和垂直半徑，只要用一個斜杠（/）分隔這兩個值即可，它不僅可以接受長度值，還可以接受百分比值。
如何創建一個自適應的橢圓：<如果要創建一個自適應的橢圓，我們可以把這兩個半徑值都設置為50%：>
border-radius: 50%; 或:border-radius: 50% / 50%;如何用CSS來畫一個平行四邊形：
嵌套元素方案：
<a href="#yolo" class="button"> <div>Click me</div> </a> .button { transform: skewX(-45deg); } .button > div { transform: skewX(45deg); }偽元素方案：
.button { position: relative; /* 其他的文字顏色、內邊距等樣式…… */ } .button::before { content: ''; /* 用偽元素來生成一個矩形 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #58a; transform: skew(45deg); }菱形圖片：
基于變形的方案：
<div class="picture"> <img src="adam-catlace.jpg" alt="..." /> </div> .picture {width: 400px;transform: rotate(45deg);overflow: hidden;} .picture > img {max-width: 100%;transform: rotate(-45deg);}或：
.picture {width: 400px;transform: rotate(45deg);overflow: hidden;} .picture > img {max-width: 100%;transform: rotate(-45deg) scale(1.42);}一邊切角效果：
background: #58a;background:linear-gradient(-45deg, transparent 15px, #58a 0);兩邊切角效果：
background: #58a; background:linear-gradient(-45deg, transparent 15px, #58a 0)right, linear-gradient(45deg, transparent 15px, #655 0)left; background-size: 50% 100%; background-repeat: no-repeat;弧形切角（內凹圓角）：
background: #58a; background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, radial-gradient(circle at top right, transparent 15px, #58a 0) top right, radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat;如何畫出一個梯形：
transform: scaleY(1.3) perspective(.5em) rotateX(5deg); transform-origin: bottom;如何做出下面圖片所示的效果：
nav > a {position: relative;display: inline-block;padding: .3em 1em 0;} nav > a::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #ccc; background-image: linear-gradient( hsla(0,0%,100%,.6), hsla(0,0%,100%,0)); border: 1px solid rgba(0,0,0,.4); border-bottom: none; border-radius: .5em .5em 0 0; box-shadow: 0 .15em white inset; transform: perspective(.5em) rotateX(5deg); transform-origin: bottom; }我們只需要把transform-origin 改成bottom left 或bottom right，就可以立即得到左側傾斜或右側傾斜的標簽頁!!!
如何生成餅狀圖：
<svg viewBox="0 0 32 32"> <circle r="16" cx="16" cy="16" /> </svg> svg { width: 100px; height: 100px; transform: rotate(-90deg); background: yellowgreen; border-radius: 50%; } circle { fill: yellowgreen; stroke: #655; stroke-width: 32; stroke-dasharray: 38 100; /* 可得到比率為38%的扇區 */ }單側投影：
box-shadow: 0 5px 4px -4px black; -4px black;解決方案來自box-shadow 鮮為人知的第四個長度參數。它排在模糊半徑參數之后，稱作擴張半徑。這個參數會根據你指定的值去擴大或（當指定負值時）縮小投影的尺寸。
鄰邊投影：<舉例來說，把一個black、6px 的投影設置到右側和底部可以這樣做：>
box-shadow: 3px 3px 6px -3px black;雙側投影：
box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;毛玻璃效果：<效果如下圖>
<main> <blockquote> "The only way to get rid of a temptation[...]" <footer><cite>Oscar Wilde,The Picture of Dorian Gray</cite></footer> </blockquote> </main> body, main::before {background: url("tiger.jpg") 0 / cover fixed;} main {position: relative;background: hsla(0,0%,100%,.3);overflow: hidden;} main::before {content: '';position: absolute;top: 0; right: 0; bottom: 0; left: 0;filter: blur(20px);margin: -30px;}某元素偽元素后面添加換行符：
XX::after {content: "\A";}插入換行：
<dl> <dt>Name:</dt> <dd>Lea Verou</dd> <dt>Email:</dt> <dd>lea@verou.me</dd> <dt>Location:</dt> <dd>Earth</dd> </dl> dd + dt::before {content: '\A';white-space: pre;} dd + dd::before {content: ', ';margin-left: -.25em;font-weight: normal;}文本行的斑馬條紋：
padding: .5em; line-height: 1.5; background: beige; background-size: auto 3em; background-origin: content-box; background-image: linear-gradient(rgba(0,0,0,.2) 50%,transparent 0);這個方法總體來說是十分靈活的，唯一可能破壞效果的情況可能就是在改變line-height 時忘了相應地調整background-size。background-size 需要設置為line-height 的兩倍，因為每個背景貼片需要覆蓋兩行代碼。
我們通常使用<pre> 和<code> 元素來顯示代碼，它們具有瀏覽器所賦予的默認樣式：
pre, code {font-family: monospace;} pre {display: block;margin: 1em 0;white-space: pre;tab-size: 2;} tab-size: 2;}tab-size: 2;用于設置縮進2個字符的寬度！
華麗的 & 符號：
@font-face規則中src描述符還可以接local()函數,Italic表示斜體！
@font-face { font-family: Ampersand; src: local('Baskerville-Italic'), local('GoudyOldStyleT-Italic'), local('Palatino-Italic'), local('BookAntiqua-Italic'); unicode-range: U+26; } h1 { font-family: Ampersand, Helvetica, sans-serif; }你還可以舉一反三用不同的的字體體來美化化數字、符號、標點等。各種創意完全停不下來！
虛線下劃線：
background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x; background-size: .2em 2px; background-position: 0 1em;通過色標的百分比位置值來微調虛線的虛實比例，通過background-size 來改變虛線的疏密。
凸版印刷效果：
在擬物化風格的網頁中，凸版印刷效果是最流行的文字美化手法之一。
這種效果尤其適用于中等亮度背景配上深色文字的場景但它也可用于深色底、淺色字的場景，只要文字不是黑色并且背景不是純黑或純白就行。
background: hsl(210, 13%, 40%); color: hsl(210, 13%, 75%); text-shadow: 0 -1px 1px black;空心字效果：
<h1><svg width="2em" height="1.2em"> <use xlink:href="#css" /> <text id="css" y="1em">CSS</text> </svg></h1> h1 {font: 500%/1 Rockwell, serif;background: deeppink;color: white;} h1 text {fill: currentColor;} h1 svg { overflow: visible } h1 use {stroke: black;stroke-width: 6;stroke-linejoin: round;}文字外發光效果：<文字外發光效果常用于凸顯標題，或給鏈接添加鼠標懸停效果>
a {background: #203;color: white;transition: 1s;} a:hover {color: transparent;text-shadow: 0 0 .1em, 0 0 .3em;}文字凸起效果：
background: #58a; color: white; text-shadow: 0 1px hsl(0,0%,85%),0 2px hsl(0,0%,80%),0 3px hsl(0,0%,75%),0 4px hsl(0,0%,70%),0 5px hsl(0,0%,65%),0 5px 10px black;或：
color: white; background: hsl(0,50%,45%); text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;用戶體驗-鼠標光標的用法：<eq:cursor:pointer;>
擴大可點擊區域：
border: 10px solid transparent;自定義復選框：
<input type="checkbox" id="awesome" /> <label for="awesome">Awesome!</label> input[type="checkbox"] + label::before {content: '\a0'; /* 不換行空格 */display: inline-block;vertical-align: .2em;width: .8em;height: .8em;margin-right: .2em;border-radius: .2em;background: silver;text-indent: .15em;line-height: .65; }/*換種顏色，加勾選標記*/ input[type="checkbox"]:checked + label::before {content: '\2713';background: yellowgreen; }/*刪除原來的勾選框*/ input[type="checkbox"] {position: absolute;clip: rect(0,0,0,0); }/*設置點擊樣式*/ input[type="checkbox"]:focus + label::before {box-shadow: 0 0 .1em .1em #58a; } input[type="checkbox"]:disabled + label::before {background: gray;box-shadow: none;color: #555; }開關式按鈕：
<input type="checkbox" id="awesome" /> <label typeof="button" for="awesome">Awesome!</label> input[type="checkbox"] { position: absolute; clip: rect(0,0,0,0); } input[type="checkbox"] + label { display: inline-block; padding: .3em .5em; background: #ccc; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: 0 1px white inset; text-align: center; text-shadow: 0 1px 1px white; } input[type="checkbox"]:checked + label, input[type="checkbox"]:active + label { box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset; border-color: rgba(0,0,0,.3); background: #bbb; }通過陰影來弱化背景：
這個效果最常HTML見的實現方法就是增加一個額外元素用于遮擋背景然后為它添加如下樣式：
.overlay { /* 用于遮擋背景 */position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,.8); } .lightbox { /* 需要吸引用戶注意的元素 */ position: absolute; z-index: 1; /* [其余樣式] */ }.overlay 遮罩層負責把這個關鍵元素背后的所有東西調暗。.lightbox需要指定一個更高的z-index，以便繪制在遮罩層的上層。
交互式的圖片對比控件：
CSS resize 方案：
<div class="image-slider"><div><img src="test01.jpg" alt="Before" /></div><img src="test02.jpg" alt="After" /> </div> .image-slider {position:relative;display: inline-block; } .image-slider > div {position: absolute;top: 0; bottom: 0; left: 0;width: 50%;max-width: 100%;overflow: hidden;resize: horizontal; } .image-slider > div::before {content: '';position: absolute;bottom: 0; right: 0;width: 12px; height: 12px;padding: 5px;background:linear-gradient(-45deg, white 50%, transparent 0);background-clip: content-box;cursor: ew-resize; } .image-slider img {display: block;user-select: none; }自適應內部元素：
<figure> <img src="adamcatlace.jpg" /> <figcaption> The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer. </figcaption> </figure> figure {max-width: 300px;/*提供回退樣式*/ max-width: min-content;margin: auto;} figure > img { max-width: inherit; } max-width: 300px;/*提供回退樣式*/ max-width: min-content;margin: auto;} figure > img { max-width: inherit; }精確控制表格列寬：
<table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr> </table> table {table-layout: fixed;width: 100%;}滿幅的背景，定寬的內容：
<footer><div class="wrapper"><!-- 頁腳的內容寫在這里 --></div> </footer> footer {padding: 1em;/*提供回退樣式*/padding: 1em calc(50% - 450px);background: #333; }垂直居中：
在CSS 中對元素進行水平居中是非常簡單的：如果它是一個行內元素，就對它的父元素應用text-align: center；如果它是一個塊級元素，就對它自身應用margin: auto。
<main><h1>Am I centered yet?</h1><p>Center me, please!</p> </main>把寬高固定的元素放置大視口的正中心<方法1>：
main {position: absolute;top: 50%;left: 50%; margin-top: -3em; /* 6/2 = 3 */ margin-left: -9em; /* 18/2 = 9 */ width: 18em;height: 6em;}把寬高固定的元素放置大視口的正中心<方法2>：
main {position: absolute;top: calc(50% - 3em);left: calc(50% - 9em);width: 18em;height: 6em;}把任意寬高的元素放置大視口的正中心：
main {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}基于視口單位的垂直居中：
視口相關的長度單位
vw 是與視口寬度相關的。與常人的直覺不符的是，1vw 實際上表示
視口寬度的1%，而不是100%。
與 vw類似，1vh表示視口高度的 1%。
當視口寬度小于高度時，1vmin等于 1vw，否則等于 1vh。
當視口寬度大于高度時，1vmax等于 1vw，否則等于 1vh。
基于Flexbox 的解決方案：<完美>
<XX><main><h1>Am I centered yet?</h1><p>Center me, please!</p></main> </XX>先給這個待居中元素的父元素設display:flex;
XX{display: flex;min-height: 100vh;margin: 0;} main {margin: auto;}緊貼底部的頁腳<固定高度的解決方案>：
<div id="wrapper"> <header><h1>Site name</h1> </header> <main><p>Bacon Ipsum dolor sit amet...<!-- 從baconipsum.com那里復制一些示意文字過來 --></p> </main> </div> <footer><p>? 2015 No rights reserved.</p><p>Made with ? by an anonymous pastafarian.</p> </footer> #wrapper {min-height: calc(100vh - 7em);}7em);}2 行× 行高+3× 段落的垂直外邊距+ 頁腳的垂直內邊距=2×1.5em+3×1em+1em=7em
緊貼底部的頁腳<更靈活的解決方案>：
完全不需要復雜的計算或是添加多余的HTML 元素等
<header><h1>Site name</h1> </header> <main><p>Bacon Ipsum dolor sit amet...<!-- 從baconipsum.com那里復制一些示意文字過來 --></p> </main> <footer><p>? 2015 No rights reserved.</p><p>Made with ? by an anonymous pastafarian.</p> </footer> body {display: flex;flex-flow: column;min-height: 100vh;} main { flex: 1; }過渡與動畫：
彈性過渡提示框：<谷歌不可用，已測IE下可用>
<label>Your username:<input id="username" /><span class="callout">Only letters, numbers,underscores (_) and hyphens (-) allowed!</span></label> input:not(:focus) + .callout {transform: scale(0);transition: .25s transform; } .callout {transform-origin: 1.4em -.4em;transition: .5s cubic-bezier(.25,.1,.3,1.5) transform; }逐幀動畫：
用JavaScript 在瀏覽器中實現靈活的逐幀動畫，比如用一張拼合圖片（image sprite）作為背景，然后用JavaScript 動態地控制它的background-position。<復雜，暫時不考慮>
<div class="loader">Loading...</div> @keyframes loader {to { background-position: -1378px 0; }}.loader {width: 173px; height: 173px;background: url(CSS.jpg) 0 0;animation: loader 1s infinite steps(8);/* 把文本隱藏起來 */text-indent: 200%;white-space: nowrap;overflow: hidden;}寬高173px為單幀的尺寸，-1378px是整個拼合圖片的長度！
打字動畫：
<h1>CSS is awesome!</h1> @keyframes typing {from { width: 0; }} h1 {width: 15ch; /* 文本的寬度 */overflow: hidden;white-space: nowrap;animation: typing 6s steps(15);}width:15ch;為文本的長度，瀏覽器是否支ch單位會決定最終的顯示效果！
鼠標懸浮長方形的圖片從左到右自動播放，鼠標移開播放暫停：
<div class="panoramic"></div> @keyframes panoramic {to { background-position: 100% 0; } } .panoramic {width: 150px; height: 150px;background: url("img/naxos-greece.jpg");background-size: auto 100%;animation: panoramic 10s linear infinite alternate;animation-play-state: paused; } .panoramic:hover, .panoramic:focus {animation-play-state: running;}width: 150px; height: 150px;表示當前圖片要顯示的大小！
沿環形路徑平移的動畫：<圖片本身也會跟著轉動>
<div class="path"><img src="yuan.png" class="avatar" /> </div> @keyframes spin {to { transform: rotate(1turn); }}.avatar {position: absolute;animation: spin 3s infinite linear;transform-origin: 50% 150px; /* 150px = 路徑的半徑 */right: 118px;/*圖片本身為64*64，118=150-64/2*/} .path{width: 300px;height: 300px;border-radius: 150px;background: aqua;position: relative;}
沿環形路徑平移的動畫<圖片本身不跟著轉動>：
END
總結
以上是生活随笔為你收集整理的CSS 样式修改技巧及心得汇总的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深入剖析大小端
- 下一篇： SpringBoot 轻松搞定数据验证