CSS好看的背景颜色样式（持续更新）

1 红色 #D24D57

2 绿色 #26A65B

3 橙色 #EB7347

4 黑色 #2C3E50

5 暗绿色 #84AF9B

6 橙红色 #FC9D99

7 草绿色 #AEDD81

8 蓝色 #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 随机颜色
代码：

function randomHexColor() { //随机生成十六进制颜色var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位hex = '0' + hex;}return '#' + hex; //返回‘#'开头16进制颜色}

12 JS 字体渐变色（自定义）
代码：

//挑选自己喜欢的双色，调用gradient()，修改dom对象// var ColorA = "#c597ff";var ColorA = "#be00ff";// var ColorB = "#73e7a9";var ColorB = "#e70065";// 颜色#FF00FF格式转为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)格式转为#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通道分别进行计算{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;/*设置字体颜色透明*/-webkit-background-clip: text;/*背景裁剪为文本形式*/animation: ran 10s linear infinite;/*动态10s展示*/}

14 CSS div边框阴影

代码：

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

CSS好看的背景颜色样式（持续更新）相关推荐

html改变复选框颜色,如何利用纯CSS改变html？radio/checkbox默认背景颜色样式
本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS代码:input[typ ...
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
CSS设置html网页背景图片 CSS设置网页背景颜色
http://www.divcss5.com/jiqiao/j768.shtml CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技 ...
网页背景颜色php代码怎么写,CSS控制网页背景颜色的代码
我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的. 想知道怎么来实现嘛,好吧 ...
php设置背景为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
html网页左侧背景,CSS设置html网页背景图片 CSS设置网页背景颜色
CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技巧为主,希望对DIV CSS爱好者有帮助.通常对网页设置背景直接对body设置背景 ...
html设置顶部背景颜色,css怎么设置背景颜色？
css怎么设置背景颜色?下面本篇文章就来给大家介绍一下使用CSS设置背景颜色的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以使用background-colo ...
css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
html背景样式代码,12种纯CSS实现的背景图案样式代码
这是使用纯css实现的背景图案样式,可以作用于任何元素甚至文本背景. 使用方法: 1使用NPM安装并下载pattern.css. 2导入pattern.css. 3.或在html文档中加载patter ...

CSS好看的背景颜色样式（持续更新）

CSS好看的背景颜色样式（持续更新）相关推荐

最新文章

热门文章