1 紅色 #D24D57

2 綠色 #26A65B

3 橙色 #EB7347

4 黑色 #2C3E50

5 暗綠色 #84AF9B

6 橙紅色 #FC9D99

7 草綠色 #AEDD81

8 藍(lán)色 #00CCFF

9 灰色 #D0D0D0

10 漸變

代碼：

background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);
background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);

11 JS 隨機(jī)顏色
代碼：

function randomHexColor() { //隨機(jī)生成十六進(jìn)制顏色var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以?xún)?nèi)16進(jìn)制數(shù)while (hex.length < 6) { //while循環(huán)判斷hex位數(shù)，少于6位前面加0湊夠6位hex = '0' + hex;}return '#' + hex; //返回‘#'開(kāi)頭16進(jìn)制顏色}

12 JS 字體 漸變色（自定義）
代碼：

//挑選自己喜歡的雙色，調(diào)用gradient()，修改dom對(duì)象// var ColorA = "#c597ff";var ColorA = "#be00ff";// var ColorB = "#73e7a9";var ColorB = "#e70065";// 顏色#FF00FF格式轉(zhuǎn)為Array(255,0,255)function color2rgb(color){var r = parseInt(color.substr(1, 2), 16);var g = parseInt(color.substr(3, 2), 16);var b = parseInt(color.substr(5, 2), 16);return new Array(r, g, b);}// 顏色Array(255,0,255)格式轉(zhuǎn)為#FF00FFfunction rgb2color(rgb){var s = "#";for (var i = 0; i < 3; i++){var c = Math.round(rgb[i]).toString(16);if (c.length == 1)c = '0' + c;s += c;}return s.toUpperCase();}// 生成漸變function gradient(){let myText = document.querySelector("#d1");var str = myText.innerText;var result = "";var Step = str.length - 1;var Gradient = new Array(3);var A = color2rgb(ColorA);var B = color2rgb(ColorB);for (var N = 0; N <= Step; N++){for (var c = 0; c < 3; c++) // RGB通道分別進(jìn)行計(jì)算{Gradient[c] = A[c] + (B[c]-A[c]) / Step * N;}result += "<font color=" + rgb2color(Gradient) +">" + str.charAt(N) + "</font>";}myText.innerHTML = result;};

13 CSS 炫彩字體

代碼：

#name {font-size: 200px;font-weight: 900;color: #8c888b;background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);-moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);-ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);color: transparent;/*設(shè)置字體顏色透明*/-webkit-background-clip: text;/*背景裁剪為文本形式*/animation: ran 10s linear infinite;/*動(dòng)態(tài)10s展示*/}

14 CSS div邊框 陰影

代碼：

<div class="image"><img src="default.jpg" /></div>.image{box-shadow: 0 0 3px #000;}

總結(jié)

以上是生活随笔為你收集整理的CSS好看的背景颜色样式（持续更新）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。