背景代码(纯白背景代码)
本文目录一览：
一小段Excel VBA代码007：将报表指定数据所在行设置背景色
一段简单的VBA代码，让你自如操作Excel！
抛砖引玉的场景需求： 批量将报表中，性别为女性的单元格所在的行的背景色设置为黄色。
报表样式
运行示例
代码示例
在标准模块中加入如下代码即可实现上面的演示功能。
Sub 将性别为女的那行颜色设置为黄色()Dim myrow As RangeFor Each myrow In Range(\"A1\").CurrentRegion.Rows If myrow.Cells(5) = \"女\" Then myrow.Interior.Color = vbYellow End IfNextEnd Sub
屏幕前的你动手试一试， 复制代码运行感受下吧~~！
更多Excel VBA编程知识（职场牛人的必备秘技），可下载安装使用一款优秀职场人必备的工具《神奇的VBA》插件，一款嵌入进Excel Ribbon界面，打开任意Excel工作簿就能随时查阅学习VBA编程的Excel 插件。
插件下载地址可私信注明邮箱或通过如下链接查询：
Excel 插件：神奇的VBA-升级
《神奇的VBA》选项卡样式
用 CSS 实现倾斜的背景颜色
我们在设计网站的时候，有时候为了体现出别具一格的风格，往往会设计出一些特殊的风格。这里就举一个比较常见的例子 —— 倾斜的背景颜色。
在CSS中，没有某一个属性能够直接实现倾斜的背景颜色，而是需要通过一些“手段”来实现。最常想到的方案就是在内容的底部放置一个div，给这个div设定一个背景颜色，然后让这个div倾斜一个角度，从而实现倾斜的背景颜色。比如像下图所示的案例：
那么下面就来用一个基本的实例来解释并实现倾斜背景的效果：
首先要说明一下，页面导航条是固定在页面顶部的，导航条不会随着页面的滚动而移动。这个效果的实现非常简单，就是利用了 position 这个属性的 fixed 值来实现的。
我下面的代码实例中，HTML用来给页面上添加元素，而在 CSS 部分需要精细化的设定属性的参数值，而且需要若干个HTML标签的CSS来配合，从而实现倾斜背景的效果。所以我在CSS代码部分用了比较多的注释来描述这些属性的效果和目的，大家在阅读的时候可以将 CSS 结合着 HTML 一起来理解。或者可以直接拿我的这个实例作为一个模板来使用。
HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="index.css"></head><body> <div class="navbar-bg"> <ul class="navbar"> <li class="item"> <a href="https://www.baidu">Home</a> </li> <li class="item"> <a href="https://www.baidu">Home</a> </li> <li class="item"> <a href="https://www.baidu">Home</a> </li> <li class="item"> <a href="https://www.baidu">Home</a> </li> <li class="item sign"> <a href="https://www.baidu">Sign</a> </li> </ul> </div> <div class="box-bg"> <div class="box"> <div class="item"> <h1>Title</h1> <p>This is the description for title.</p> <button>click me</button> </div> <div class="item"> <h1>Title</h1> <p>This is the description for title.</p> <button>click me</button> </div> <div class="item"> <h1>Title</h1> <p>This is the description for title.</p> <button>click me</button> </div> </div> </div> <div class="content"> <h1>This is content</h1> </div> <div class="footer"> <div class="footer-bg"> <ul class="list"> <li> <a href="https://greatfrank">Link</a> </li> <li> <a href="https://greatfrank">Link</a> </li> <li> <a href="https://greatfrank">Link</a> </li> <li> <a href="https://greatfrank">Link</a> </li> <li> <a href="https://greatfrank">Link</a> </li> <li> <a href="https://greatfrank">Link</a> </li> </ul> </div> </div></body></html>
为了让导航条和其他元素都能够与页面的两边留出距离，我在实际内容标签的外围又包裹了一层div，主要在这个包裹的div里设定左右内间距，从而实现两边留白的效果。这些外围包裹的 div 的 class 名称一般都会有一个后缀 "-bg"。
在实际内容的排列时，我采用了更加方便灵活的弹性布局，这样会相对的减少HTML和CSS的代码量。
另外，如果想要实现倾斜的背景颜色，那么这些带有 bg 后缀的 div 就是需要倾斜的标签。倾斜这些 div 其实很简单，只需要设定一个 transform: skew(0deg, -9deg) 这样的CSS代码即可，但是我们可以想象一下，原本是长方形的 div 按照 Y 轴逆时针旋转了一个弧度（-9deg）后，它会变成一个平行四边形，这个平行四边形是左边低右边高。这样就会露出它后面的白色的 body 的部分。所以这种玩法麻烦的地方就是如何通过多个 CSS 属性的配合来遮住露出的白色的body部分。下面就来看一下这个HTML对应的 CSS 代码部分。
在大家阅读 CSS 的代码之前，我给出一个原理图来解释一下其中的原理：
当外围的 div 倾斜了之后，就需要把内容部分的div的上部的内间距增大，以此来遮住平行四边形的左侧露出的白域。这是页面上部区域的原理。
那么页面底部也同样需要实现这样倾斜背景颜色的设计，这样才能将风格一致，产生美感。原理还是这个原理图所示的逻辑，不同的地方在于，底部最外围的 div 不倾斜，而是需要两个属性，height 和 overflow-y，并且这个 div 不能带有背景颜色。它们的作用是当它里面的内容超出这个 div 的区域时就不显示，这样就会让上图中蓝色的平行西变形的左下角区域被红色的框线裁剪掉，从而让这个div 乖乖的呆在页面的底部。而这个 div 里面一层的 div 需要让它倾斜，而且还带有一个背景颜色。这样组合出来的效果就是一个看似是左右两边是竖线，下部是横线，只有上部是斜线的带有背景颜色的四边形，这个四边形里面是实际的页面内容。
最终的样子在这篇 CSS 代码的最后展示出来了。
CSS* { padding: 0rem; margin: 0rem;}/* ----------------------------- */.navbar-bg{ /* 因为要给导航条添加背景颜色，所以要给导航条添加一个外围的包裹层 */ width: 100%; background-color: orangered; /* 固定在页面顶部 */ position: fixed; /* 紧贴在顶部 */ top: 0rem; /* 层级最高，能够正常显示出来，不会被其他元素覆盖 */ z-index: 99999;}.navbar{ /* 添加内间距，与屏幕两边拉开距离 */ padding: 0rem 12rem; list-style: none; /* 弹性布局 */ display: flex;}.navbar .item{ /* 每一个项的宽度为总宽度的 1/6 */ flex: 1; padding: 1rem 0rem;}.navbar .item.sign{ /* 这个单独的一项的宽度为总宽度的 5/6 */ flex: 5; text-align: right;}.navbar .item a{ /* 修改导航条里链接的样式 */ text-decoration: none; color: white; padding: 1rem 2rem;}.navbar .item a:hover{ background-color: orange;}/* ============================================ */.box-bg{ background-color: #0066CC; padding: 3rem 0rem 10rem; /* 在Y轴上逆时针倾斜，这样右边会翘起，左边会垂下 */ transform: skew(0deg, -9deg); /* 整体向上移动，把body完全遮住 */ margin-top: -1rem;}.box{ /* 因为外围倾斜会将里面的内容全部倾斜，所以这里把内容部分恢复原状，即反方向倾斜回去 */ transform: skew(0deg, 9deg); /* 弹性布局 */ display: flex; /* 主要是添加上部的内间距，把倾斜后漏出的body部分遮住 */ padding: 6rem 12rem 3rem; background-color: #0066CC;}.box .item{ padding: 4rem; /* 弹性布局里面的所有单元的宽度都相等，box里面有三个item，那么每一个item就占总宽度的 1/3 */ flex: 1; border: solid 1px white;}/* ================================= */ntent{ padding: 12rem 0rem; text-align: center; font-size: 4rem; margin: 7rem 0rem 0rem;}/* ================================= */.footer{ /* 在最外围包裹一个div，设定它的高度 */ height: 25rem; /* 如果它里面的内容超出了这个高度，则隐藏。这样就保证了这个div里面的内容不会把页面底部顶起来 */ overflow-y: hidden; /* 这里要设定一个上内间距，以保证内部倾斜的div的背景颜色能正常显式 */ padding: 10rem 0rem 0rem;}.footer .footer-bg{ /* 这个div是要进行倾斜的 */ transform: skew(0deg, -9deg); /* 给它设定一个左右的内间距，让它里面的列表不要顶着页面两侧。还要设定一个下内间距，让它的背景颜色占满整个 footer 的高度。这样做的效果就是只会看到上部倾斜的背景颜色，而下部倾斜的背景颜色因为这个下内间距会占满外围的 footer 的高度，而外围的 footer 因为有 overflow: hidden 会把下部倾斜的背景颜色裁切掉 */ padding: 0rem 12rem 30rem; background-color: gray;}.footer .footer-bg .list{ /* 这是实际的链接列表，让它采用弹性布局 */ display: flex; /* 给它一个上外间距，让整个列表朝下移动一定的距离，不要离上部倾斜的背景颜色太近。留白才会有美感 */ margin-top: 4rem; /* 这个倾斜与 footer-bg 的倾斜相反，相抵消，从而让这个列表水平 */ transform: skew(0deg, 9deg); /* 去掉 ul 里每一个 li 前面默认的黑点 */ list-style: none; /* 给一个上内间距，把整个列表朝下移动 */ padding-top: 12rem;}.footer .footer-bg .list li{ /* 让 ul 里面的每一个 li 的宽度一致，这样会均分屏幕宽度 */ flex: 1;}.footer .footer-bg .list li a{ /* 给 li 里面的每一个 a 标签设定一些样式 */ color: white; background-color: red; padding:0.5rem 2rem;}.footer .footer-bg .list li a:hover{ /* 设定鼠标悬浮到 a 标签上时的样式 */ background-color: greenyellow; color: black;}
如何让文字作为CSS背景图片显示（转）
今天小胖在coding的时候，遇到一个问题，就是要使用一个动态的文本作为div的背景，想着使用绝对定位堆叠来实现，或者伪元素实现，终归不够优雅，直到看到张鑫旭大佬的这篇文章，只能说，很当优雅！
在实际开发中，有时候希望文字内容可以作为背景图片显示，一方面是希望利用背景图片的优势，例如可以平铺，另外一方面是常见的替换元素不能使用伪元素创建文字，此时只能寄希望与背景图。
关键如何把文字变成背景图呢？
通常CSS开发人员的做法是把文字导出来转换成图片，然后作为背景图显示，但是这样成本有些高，也不利于日后的维护。
这里给大家介绍一种实用的技术，可以让文字作为CSS背景图片。
一、SVG本质上就是一个图像SVG虽然是XML语言构成的，但是本质上就是一个图像，是可以作为图像使用的，例如：
<img src="zhangxinxu.svg">
此时的zhangxinxu.svg就是一个图像，同样的，也可以作为背景图显示，例如：
.example { background: url(zhangxinxu.svg);}
但是，这里的SVG文件都是独立的SVG文件，和把文字导出成PNG图片没有任何区别，根本没有意义嘛！
对的，请不用急，是这样的，SVG作为一个矢量图像，和通常的位图有一点不一样，那就是SVG图像可以直接以源代码的方式内联在Web页面中。
关于这个特性，可以参考我之前的这篇文章：“学习了，CSS中内联SVG图片有比Base64更好的形式 � 张鑫旭-鑫空间-鑫生活”。
例如下面是一段显示文本的SVG代码：
<svg xmlns="http://www.w3/2000/svg"> <text>文字内容</text></svg>
是可以直接作为background-image使用的，例如：
.by-zhangxinxu { background-image: url('<svg xmlns="http://www.w3/2000/svg"><text>文字内容</text></svg>');}
由于安全性限制，目前需要对部分字符进行转义，因此，实际的CSS代码是这样的：
.exmaple { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3/2000/svg'%3E%3Ctext%3E文字内容%3C/text%3E%3C/svg%3E");}
相比PNG图像的文字背景，使用SVG内联的好处在于，我们可以轻松修改文字的内容，同时我们可以随意设置文字的字号大小，颜色、描边效果等等。
但是，每次都手写一段SVG代码好难哦，尤其很多前端小伙伴对SVG并不是很熟悉。
不要紧，考虑到这种情况存在，我专门做了一个生成SVG文字背景图的工具。
二、SVG文字背景图生成工具您可以狠狠地点击这里：文字转SVG图像在线转换工具 » 张鑫旭-鑫空间-鑫生活
界面截图示意如下：
最上面是配置区域，可以设置作为背景的文字内容，可以设置文字的颜色、透明度以及位置等信息。
中间是代码区，左侧是原始SVG，可以点击图标下载SVG文件到本地；右侧是转义的可以直接内联使用的SVG代码，HTML和CSS中均可内联使用。
最下面是预览区域。
如果需要其他配置项
实际开发中的需求是千变万化的，工具目前内置的配置项不一定能覆盖所有的场景，此时可以这么处理，直接修改左侧文本域中的SVG代码，此时右侧的转义SVG代码会自动同步，例如，如果我们希望背景文字带有旋转效果，这样可以作为水印图片使用，则可以在已经生成的SVG代码中的元素上设置45度旋转相关的代码。
一种方法是直接在<svg>元素上设置传统DOM元素的CSS style设置，例如：
另外一种方法就是<text>元素上使用SVG元素自动的transform属性进行设置，但是SVG中的transform变换坐标和CSS是很不一样的，直接<text transform="rotate(-45)">是不会有预期的旋转效果的，因为默认SVG的变换中心点是左上角，因此，设置transform="rotate(-45)"会让文字不可见。
关于SVG的transform变换坐标体系可以参考我之前写的这篇文章：“理解SVG transform坐标变换”
<text>元素也能围绕中心点变换有2个方法，一种是使用translate()函数先偏移、然后再旋转，然后在偏移复原，这种方法啰嗦了一点，另外一种方法就是使用SVG中rotate()函数的可选参数，也就是第2个参数，就是可以指定旋转的中心点坐标，这个特性SVG独有，Canvas中是没有的。
代码演示如下截图所示：
其中，可以看到专门设置了SVG元素的width宽和height高，因为如果不设置，按照目前的CSS background-size的尺寸渲染规范，SVG的尺寸会采用容器的尺寸，rotate()函数的第2个参数就需要设置为容器元素的宽高的一半才能让文字居中旋转。
更新于 2022-01-25
dominant-baseline="middle" 只是近似垂直居中，如果 SVG 图片高度较小，会看到往上偏移了一点距离，此时可以试试修改为 dominant-baseline="central"。
三、文字背景图应用案例这里抛砖引玉，举几个使用文字作为背景图的例子。
1. 水印例如为防止截图，会给页面，或者聊天软件背景等增加文字水印。
以前几乎都是通过生成一个专门的PNG图片实现，现在可以直接代码内联，例如点击下面这个按钮，大家就可以看到我这篇文章的实时水印效果了。
不要害怕，用力点击我
相关CSS代码如下所示：
.target { background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.5' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'%3Ezhangxinxu%3C/text%3E%3C/svg%3E");}
截图效果如下所示：
2. 输入框其他位置的占位符提示效果常规的占位符都是在输入框的左上方，或者右上方，如果我们希望提示的占位符在右下角，则就可以使用这里的文本图像技术实现。
比方说下面这个多行文本域输入框，当你输入内容，右下角的提示内容就会消失，没有内容的时候就又会显示（实时效果，可以亲自体验下）。
相关HTML和CSS代码如下所示：
<textarea class="custom-placeholder" required></textarea>
.custom-placeholder { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3/2000/svg'%3E%3Ctext x='100%25' y='96%25' font-size='12' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='end'%3E富强文明和谐美丽%3C/text%3E%3C/svg%3E") no-repeat right 10px bottom 5px;}.custom-placeholder:valid { background: none;}
因为这里的文本是右对齐，下对齐，因此，设置text-anchor属性值是end，同时x, y属性值都是100%或者接近100%。
3. 视频无法播放提示HTML5 <video>元素中的视频如果因为地址错误等原因无法播放，是没有办法像普通元素那样写入一段错误提示文字，因为<video>元素是替换元素，写在标签里面的内容都会被忽略。
此时，可以让视频播放出错的时候以背景图的形式显示文字就可以了。
比方说下面这个实时例子，就是一个故意写错了地址的MP4视频，大家可以看到“视频无法预览”的白色提示文字，就是使用这篇文章提供的技术实现的。
相关代码如下所示：
<video src="xxx.png" type="video/mp4" width="360" height="240" onerror="this.classList.add('error')"></video>
video.error{ background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill='%23ffffff' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E视频无法预览%3C/text%3E%3C/svg%3E") no-repeat center;}
简单易懂体验绝佳老少皆宜。
四、总结一下如果想让文字内容直接作为背景图片显示，可以使用SVG元素作为中间桥梁实现。
关键问题是SVG元素的获得不太容易，因此，我就专门给大家开发了一个工具，通过简单配置实现想要的CSS文字背景代码。
同时介绍了如果通过修改左侧输入框得到自定义的文字背景效果。
最后，介绍了3个具有代表性的案例，展示了文字作为背景图片的一些妙用，抛砖引玉，希望可以启发大家在实际开发中的应用。
OK，技术本身并不难，难的是当遇到类似场景的时候可以想到可以直接使用代码实现，而不是导出图片。
好，以上就是本文的全部内容，感谢您的阅读，如果您觉得本文内容还挺有帮助的，欢迎分享。
本文转自张鑫旭大佬的分享，原文地址：如何让文字作为CSS背景图片显示？ � 张鑫旭-鑫空间-鑫生活，张大佬经常分享一些很不错的css idea，推荐大家经常刷刷他的博客，他的书也不错，大家也可以买来读一读！
零基础教你学前端——72 CSS背景
我们学习 CSS 背景属性。
假设这里有个 div 容器，宽 400，高 300，默认情况下，这个 div 是没有背景的，或者说它的背景是透明的，我们拿一张图片实验一下就能看得出来，这个 div 在默认情况下，背景是透明的。
也可以给 div 加一个背景颜色。
既然可以设置背景颜色，那么当然也可以给这个 div 设计一个背景图片，就像这样。但是由于这个 div 已经被我设定了大小，图片呢，是大于这个容器的，所以实际上，我们最终看到的效果，是这个样子的。我们只能看到图片的一部分。下面我们就来看看应用 CSS 背景属性如何实现这个效果。
创建一个 css-background.html 文件和一个 background-style.css 文件。接下来，我们打算给整个页面来添加背景图片。
事实上，body 元素也是一个容器，可以直接给 body 添加背景图片。body 容器默认水平方向上，是占满整个窗口的，我们来给它添加一个高度样式，定义选择器 body，声明样式 height: 100%。
CSSbody { height: 100%;}
预览一下效果，按下 F12，来观察一下页面 body 元素的大小，我们发现 body 依然是只有宽度，没有高度。为什么我们设置的高度 100% 不管用呢？大家注意，这里的100%是相对于它的父元素高度的，body 元素的父元素是 html，这个元素我们并没有给它设置大小。
所以，在 body 选择器前面加一个 html 逗号 ( html, )，这样两个元素都设置了高度。让他们的高度和浏览器窗口大小保持一致。
这时再来看一下页面，现在 body 和整个窗口就一样大了。
CSShtml, body { height: 100%;}
下面我们给 body 添加背景图片，可以通过 background-image 属性实现，属性值为 url 后跟一个小括号，括号里面填写背景图片的路径 （url(./duck.gif)）。
回到样式代码，再定义一个 body 选择器，单独给它再声明样式 background-image: url(./duck.gif)。这个图片是一个动态图片。
我们来观看一下效果，为什么会出现这么多的图片呢？我明明只是加了一张背景图而已。原因是，当我们给元素添加背景图片的时候，图片是以平铺的方式来展现的。
什么是平铺呢？就是当我们放入一张背景图的时候，这个图片在默认情况下，会向四周扩散，无限的进行重复，就变成了这个样子。当然了，容器是有大小限制的，最终我们能看到的部分呢，也就这么多而已。
如果我们不希望这个背景图是重复的，需要使用一个新的背景属性 background-repeat，取值为 no-repeat。
我们来看效果，最终就只有一张动图了。
接下来我们来修改一下，将背景图片换成另外一张图片。
再来观察这个效果，由于不允许平铺，我们只看到了一张图片。
把 background-repeat 属性值 no-repeat 改为 repeat。
我们就看到了这样的效果。
在平时开发的时候，给一个网页或一个比较大的容器设置背景，经常会采用这样的技巧，放一个小的图片进去，只需要让它保持平铺的方式，我就会得到一张无限大的图。
再回到刚才的例子。如果要求这个背景图片在页面中间显示，我们如何调整背景图的位置呢？
我们需要使用 background-position 属性，这个属性需要写两个值：第一个值表示在水平方向上的对齐方式——left，center，right。第二个值表示在垂直方向上的对齐方式——top，center ，bottom。
给 body 添加样式 background-position: center center，也就是水平垂直居中。
大家发现，图片移到了页面的中间。如果将图片放到右下角，属性值该如何设置呢？把答案写到公屏上吧。
回到 html 代码，添加一个 h1 元素和五个 p 元素，填入一些文本。再复制五份。
再回到 css 代码，背景图恢复为 bg.png，图片平铺方式为 repeat。
我们看一下效果，可以通过滚动条来查看网页内容，仔细观察，文字和背景图片一起滚动。那能否实现文字滚动，背景图片不动呢？大家可以先脑补一下效果。
实现这个效果，需要使用 background-attachment 属性，用来声明容器里的背景图片与内容的依附方式。值 fixed：图片固定，值 scroll：同时滚动。
给 body 选择器添加样式 background-attachment
[əˈtætʃmənt] : fixed。
再看一下效果，滚动一下页面，背景固定的效果实现了！
前面我们多次使用到了 background-color 属性，它可以给容器设置背景颜色，值可以设置为颜色名称，十六进制颜色值，RGB颜色值等等。
把背景图片的样式注释掉，添加 background-color 属性，值为 green。
此时，整个页面背景为绿色！颜色有点深，可以让绿色变的浅一些吗？
你能想到的方法应该是换一个其他的颜色值，其实，我们可以通过让背景透明一些，同样可以实现这个效果。
这需要学习一个新的颜色值表示方法——rgba。这里的 rgb 就是 rgb 颜色值，a 是 alpha 的简写，表示通过设置一个 alpha 通道，来指定颜色的不透明度，是一个介于 0 到 1 的数字。0表示完全透明，1 表示完全不透明。比如 rgba(0, 0, 0, 0.5)，表示的颜色就是黑色半透明。
把 green 颜色名称改为 rgba(0, 255, 0, 0.1)。
我们看，页面绿色的背景因为透明，颜色变浅了！
为了缩短代码，也可以使用单一的 background 来指定所有的背景属性。
可以把 body 的全部背景属性，合并在一个 background 属性里。注释所有代码，声明属性 background，值可以写为：颜色值 rgba(0, 255, 0, 0.1)， 背景图片 url(./duck.gif)，平铺方式 no-repeat，背景图位置 right bottom，背景依附 fixed。 （rgba(0, 255, 0, 0.1) url(./bg.png) no-repeat right bottom fixed;）
我们看，一句声明，实现了全部的背景效果！
文章配套视频链接： https://www.bilibili/video/BV1oU4y1278g/?p=75
代码变油画精细到毛发，前端小姐姐用HTML+CSS，让美术设计也惊叹
来源：量子位链接：/d/file/gt/2023-09/4abd0ir0rre Trending排行榜第二名：并且Issues里都是诸多用户的膜拜：厉害！崇拜！太棒了！
它们的作者，是湾区前端大神Diana Smith小姐姐，她目前是企业及软件开发商Atlassian的一名资深Web开发。
绘制过程Diana在专门讨论CSS的网站CSS-Tricks写下了详细的教程。
画出这样一个图形分成几步？
如果不用CSS，一般都是直接嵌入这个特殊的图形。
如果用CSS，那么就从黑色矩形开始，然后在两侧加上上两个
与白色背景颜色匹配的边框半径元素。
先画出一个黑色矩形，然后两边用圆弧遮挡。有了基础形状后，下一步就是给它添上渐变的背景。但是如果用矩形方式填充，得到的效果就是这样的：
Diana的办法是：在保留矩形的同时，加上两个弯曲的div，把凹进去的部分也填充上。
最后完整的代码是这样的：
div{ width: 500px; height: 350px; background: #000; position: relative; &::after, &::before{ width: 20%; height: 100%; position: absolute; top: 0; z-index:2; content: ""; background: #1e5799; background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); } &::after{ border-radius: 100% 0% 0% 100%; right: 0; } &::before{ border-radius: 0 100% 100% 0; left: 0; } }body{ background: #1e5799; background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); }
你也可以去这个完成查看CSS样式的实际运行效果：
https://codepen.io/jean-jordan/pen/KeKaBw
刚刚我们画的那幅画像不像人的脖子？好的，我们再回到人像画上，Diana绘制人物的脖子也是类似的过程。
在上面这张图里，我们看到了Diana如何逐步改形状，最终得到了油画中人物的脖子。
但是仅仅会画各种几何形状，是无法生成艺术品的，Diana总结了她在绘图中的5个重要CSS属性。
1、边界半径（border-radius）
边界半径是为了让矩形的边角过渡得更自然，对于大多数网页开发者来说，只需一个参数border-radius，可以设定不同的半径数值。
border-radius: 15px 10px 40px 30px / 40px 10px 15px 30px;
2、盒子阴影（box-shadow）
对多个盒子阴影进行分层是增加深度的最佳方法之一。框阴影将粘附到html容器的边缘，也会沿着边界半径定义的边缘。
box-shadow: 6px -11px 20px 1px red, -15px -15px 5px -10px blue, inset 5px 5px 35px 10px green;
开发者可以指定模糊半径，以及阴影是向内延伸还是向外延伸。
3、变形（transform）
变形的主要方式有：旋转（rotate）、缩放（scale）和倾斜（skew）
transform: rotate(-45deg)transform: scale(0.7, 1.3)transform: skew(25deg, 30deg);
此外还有透视，让物体产生远小近大的视觉效果，或者是仅仅为画出一个梯形。
transform: perspective(10px) rotateY(5deg);
4、线性梯度（linear-gradient）和径向梯度（radial-gradient）
线性梯度用于定义一个方向上的渐变效果，径向梯度用于定义圆和椭圆形的渐变效果
background-image: linear-gradient(0deg, blue, transparent 60%),radial-gradient(circle at 70% 30%, purple, transparent 40%);
5、层叠（overflow）
层叠是一种将大量杂乱元素填充到一个整齐的包中的方法，可以创建一些有趣的形状。在变形那部分的基础上使用hidden参数，可以把边缘遮盖起来。
overflow: hidden;
以上5种元素缺一不可，随便少一种都会产生怪异的效果。
△从左至右分别是缺少边界半径、阴影、变形、梯度、层叠的效果（点击查看大图）不过即使这样，也很有抽象艺术的美感，仿佛在看毕加索的作品。
只适用于Chrome不过，由于这是一个纯个人艺术创作，Diana小姐姐并不关心浏览器适配性。
因此，这些代码在Chrome里可以完美展现，但如果用其他浏览器打开，可能就会出现不一样的效果。
比如，MAC上的Safari浏览器打开，妹子的眼睛就方了：
肩膀上的高光，变成了一个大圈圈：
胸前的礼服上，也被泼了一道墨：
如果用早期的Chrome打开，会出现惊悚的头身分离的效果：
早期的Opera浏览器，打开之后脸方了：
Windows 7上从IE 6到IE 11，显示出来的都是这个鬼样子：
浓重的线条，甚至有点抽象艺术的感觉。
同样是早期IE，放到Mac上也一样鬼畜，这是IE 5.1.7的效果：
还有人试了试，在Windows 98系统的IE 7浏览器打开，会变成非常像素风的样子：
最恐怖的是三星手机上的夜间模式打开：
连人种都变了啊！
其他的几张画，换个浏览器打开也比较鬼畜。
妹子你bra里的钢圈出来了啊！
拉夫领变得透明而有光泽，领口的蕾丝干脆断掉了，仿佛是逃难时期的肖像画。
最后，如果你在iPhone上装了Chrome，出来的也是Safari的效果，想看完整效果的话，请在安卓手机或者电脑的Chrome上打开。
因此，有不少网友都觉得，这几幅画可以当成浏览器测试项目，一试就能知道内核用的是谁家的。
反向绘图CSS太难，学不会？不要紧，虽然我们不能把代码变成图片，但是可以把图片变成代码啊。
没错，就是ASCII艺术，早在DOS时期，就有人用命令行界面来显示图片。直到今天已成为一种流行的互联网文化。
用单色字符来画出世界名画已经不算新鲜事。最近又有个码农开发了一个新的项目Primg，让任何一幅画都可以用质数来表示。
比如蒙拉丽莎，就可以用一个3万位的质数二进制方式绘制出来。
热门推荐
推荐阅读
热门标签
热门精选
- 06-25塔罗牌恶魔正位(塔罗牌恶魔正位代表什么)
- 07-04九紫(九紫是什么意思)
- 06-17八字算命无金(八字没有金代表什么)
- 06-22潘昭佑讲八字(潘昭佑八字理论之)
- 06-23紫薇星下凡(紫微星为什么老是下凡)
- 06-24杨紫是什么星座(杨紫的星座是什么座)
- 06-23左边右边(左右是如何定义的)
- 06-28观音灵签8(姚能遇仙是什么意思)
- 06-12太白星八字(八字如何看神煞)
- 06-12八字紫薇命盘(如何查自己的命宫)
紫微斗数最新文章
- 12-30背景代码(纯白背景代码)
- 12-30梦见去世的外婆(梦到已过世的外婆和我说话)
- 12-30庚戌日(庚戌日柱男命)
- 12-30恢复出厂设置苹果(恢复出厂设置苹果id会退出么)
- 12-30弥勒佛图片(弥勒佛图片大全高清)
- 12-30德州鼠蛇(德州鼠蛇白娘娘)
- 12-30中国面积和人口(中国面积和人口是多少平方千米)
- 12-30节日大全(节日大全及时间一览表)
- 12-30全国重名查询系统(全国重名查询系统入口免费)
- 12-30习劳(劳知感恩的意思)