我正在参加第 6 期掘金创想营， 点击了解活动详情
前言
《CSS Demystification》一书以案例的形式介绍了47个经典网页设计问题的解决方案。学习后我一一记录下来，方便复习。本文介绍前19个案例的效果和代码。
在线预览 play.csssecrets.io
1-半透明边框
问题
当你使用 rgba() 或者 hsla() 写一个半透明的颜色给容器的边框时，你会发现没有半透明的效果，因为默认情况下，背景色会填充边框区域，导致边框的半透明效果无效。当边框样式设置为虚线时，你会很直观的发现这一点。
程序
使用 background-clip 属性来调整上面的默认效果。此属性的默认值为border-box。此时，背景将被元素的边框覆盖。也可以配置padding-box ||内容框。这时，浏览器会用填充或内容区域的外边缘进行渲染。
修改后，边框的半透明效果生效。
扩张
background-clip 还有一个 text 属性，非常有趣。当设置为文本时，背景将被裁剪为文本。 前景色 .
2-多个边界
问题
使用border生成单个边框很容易，但是如果要生成多个边框，就不行了。您通常需要使用各种技巧，例如使用多个元素来模拟实现。
选项 1：盒子阴影
正膨胀半径加上两个零偏移和零模糊值导致“投影”实际上是一条实线；结合 box-shadow 的逗号分隔语法，创建任意数量的 projections 。
注意：
- 投影行为与边框不完全相同
- 生成的边框默认出现在元素的外圈。您可以添加 inset 关键字以使投影绘制在元素的内圆上。小心保留足够的填充以腾出足够的空间。
选项 2：大纲
如果只需要两层边框，可以在常规边框的基础上添加outline（描边）属性生成外边框，更加灵活。
总结
这两种方案都可以达到多边框的效果，但是outline只适用于双层边框的场景。如果需要更多层的边框，可以使用 box-shadow 来实现。此外，这两种方案都有一个潜在的缺陷。使用时，一定要在不同的浏览器中测试最终效果。
3- 灵活的背景定位
问题
想要的效果：让背景图对某个角有准确的偏移定位？
场景 1 背景位置
场景2背景-起源
这种方案的优点是当padding发生变化时，会自动更新位置偏移量，而不需要重新声明新的偏移量。
场景 3 calc()
calc() 也可以结合 background-position 来精确计算偏移量，达到同样的效果。注意 calc() 函数内部的 — 和 + 运算符需要用空格字符包围，否则会出现解析错误。
背景-位置：计算（100% - 20px）计算（100% - 10px）；
复制代码
4 边框圆角
想要的效果如下，只显示内圆角，外角还是矩形
方案1 双元素叠加
使用双div元素叠加实现
<div class= "parent">
<div类=“孩子”></ div >
</div>
.父母{
边距：100px 自动；
宽度：400px；
高度：200px；
背景：#655；
填充：0.8em；
}
.孩子 {
高度：170px；
背景：棕褐色；
填充：1em；
边界半径：0.8em；
}
复制代码
场景 2 单元素
该解决方案在书中被称为 hack。果然，我在写这篇文章的时候，验证了谷歌浏览器中的大纲样式会遵循border-radius，所以这个方案基本失败了。
分区 {
轮廓：.6em 实心#655；
盒子阴影阴影：0 0 0 .4em #655； /* todo 计算这个的最大值 */
最大宽度：10em；
边界半径：0.8em；
填充：1em；
保证金：1em；
背景：棕褐色；
字体：100%/ 1.5 无衬线；
}
复制代码
5-条纹背景
介绍
传统的解决方法是用svg或者图片来解决，这里直接用css创建条纹图案
// 横条纹效果
背景：线性渐变（#fb3 50%，#58a 50%）；
背景尺寸：100% 30px；
//竖条纹效果
背景：线性渐变（向右，#fb3 50%，#58a 0）；
背景尺寸：30px 100%；
// 斜条纹
背景：线性渐变（45度，#fb3 50%，#58a 0）；
背景大小：30px 30px；
// 相同颜色的条纹
背景：重复线性渐变（30deg，#79b，#79b 15px，#58a 0，#58a 30px）；
背景：#58a；
// 重建相同颜色的条纹
背景：重复线性渐变（
30度，
hsla(0, 0%, 100%, .1),
hsla(0, 0%, 100%, .1) 15px,
透明 0,
透明 30px);
背景：#58a；
复制代码
6- 复杂的背景图案
桌布图案
/** * 棋盘格 */
背景：#eee；
背景图片：
线性渐变（45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
线性渐变（45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
背景-位置：0 0, 15px 15px;
背景大小：30px 30px；
最小高度：100%；
/** * 波尔卡圆点 */
背景：#655；
背景图像：径向渐变（棕褐色 20%，透明 0），
径向渐变（棕褐色 20%，透明 0）；
背景大小：30px 30px；
背景-位置：0 0, 15px 15px;
复制代码
棋盘
/** * 棋盘格 */
背景：#eee；
背景图片：
线性渐变（45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0),
线性渐变（45deg, rgba(0, 0, 0, .25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, .25) 0);
背景-位置：0 0, 15px 15px;
背景大小：30px 30px；
最小高度：100%；
/** * 带有 SVG 的棋盘 */
背景：#eee url（'数据：图像/svg+xml，\<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" > \<rect x="50" width="50" height="50" /> \<rect y="50" width="50" height="50" /> \</svg> ');
背景大小：30px 30px；
复制代码
角度梯度
/** * 圆锥渐变测试 * 如果绿色渐变通过，如果红色渐变失败。 */
背景：红色；
背景：圆锥梯度（石灰绿，绿色，石灰绿）；
最小高度：100%；
复制代码
7 — 伪随机背景
难点：重复的瓷砖图案虽然漂亮，但不是很自然。下面介绍添加随机背景的方法
/** * 伪随机条纹 */
背景：hsl(20, 40%, 90%);
背景图片：
线性渐变（90度，#fb3 11px，透明0），
线性渐变（90度，#ab4 23px，透明0），
线性渐变（90度，＃655 23px，透明0）；
背景尺寸：83px 100%、61px 100%、41px 100%；
复制代码
8-连续图像边框
难点：通常这个效果是借助双Dom来实现的，一个做背景图，一个做内容；我们的改进方案基于一个元素。
/** * 基本边框图像演示 */
分区 {
边框：40px 纯透明；
边框-图像：33.334% url('data:image/svg+xml,<svg xmlns="http:%2F%2Fwww.w3.org%2F2000%2Fsvg" width="30" height="30"> \<circle cx="5" cy="5" r="5" fill="%23ab4"%2F><circle cx="15" cy="5" r="5" fill=" %23655"%2F> \<circle cx="25" cy="5" r="5" fill="%23e07"%2F><circle cx="5" cy="15" r="5" fill=" %23655"%2F> \<circle cx="15" cy="15" r="5" fill="hsl(15, 25%, 75%)"%2F> \<circle cx="25" cy="15" r="5" fill=" %23655"%2F><circle cx="5" cy="25" r="5" fill="%23fb3"%2F> \<circle cx="15" cy="25" r="5" fill=" %23655"%2F><circle cx="25" cy="25" r="5" fill="%2358a"%2F> <%2Fsvg>');
填充：1em；
最大宽度：20em；
字体：130%/ 1.6 Baskerville, Palatino, serif；
}
div：第n个孩子（2）{
边距顶部：1em；
边框图像重复：圆形；
}
复制代码
利用上面的条纹背景
/** * 复古信封主题边框 */
分区 {
填充：1em；
边框：1em 实心透明；
背景：线性渐变（白色，白色）填充框，
重复线性渐变（-45deg，红色 0，红色 12.5%，透明 0，透明 25%，
#58a 0, #58a 37.5%, 透明 0, 透明 50%) 0 / 6em 6em;
最大宽度：20em；
字体：100%/ 1.6 Baskerville, Palatino, serif；
}
复制代码
9-自适应椭圆
难点：border-radius 其实可以通过斜线（/）分隔两个值来分别指定水平和垂直半径。使用此功能创建椭圆圆角。
椭圆形
/** * 弹性椭圆 */
分区 {
宽度：20em；
高度：10em；
背景：#fb3；
边界半径：50%；
}
复制代码
半椭圆
/** * 柔性半椭圆 */
分区 {
显示：内联块；
宽度：16em；
高度：10em；
保证金：1em；
背景：#fb3；
边界半径：50% / 100% 100% 0 0；
}
div:nth-of-type(2) { 边界半径: 50% / 0 0 100% 100%; }
div:nth-of-type(3) { 边界半径: 100% 0 0 100% / 50%; }
div:nth- of- type(4) { 边界半径: 0 100% 100% 0 / 50%; }
复制代码
四分之一椭圆
/** * 弹性四分之一椭圆 */
分区 {
显示：内联块；
宽度：16em；
高度：10em；
保证金：1em；
背景：#fb3；
边界半径：100% 0 0 0；
}
div：第n个类型（2）{边界半径：0 100％0 0； }
div：第n个类型（3）{边界半径：0 0 100％0； }
div:nth- of- type(4) { 边界半径: 0 0 0 100%; }
复制代码
10 — 平行四边形
背景知识：基础css变形变换：skewx()
潜水元件方案
可以解决文字变形问题
/** * 平行四边形——带有额外的 HTML 元素 */
<a href= "#yolo" class= "button"><div>点我</a></ div >
<按钮类=“按钮”> <div>点我</ div ></ button >
.按钮 { 变换：skewX(45deg); }
.按钮 > div { 变换：skewX(-45deg); }
.按钮 {
显示：内联块；
填充：0.5em 1em；
边框：0；边距：0.5em；
背景：#58a；
白颜色;
文本变换：大写；
文字装饰：无；
字体：粗体 200%/ 1 sans-serif；
}
复制代码
伪元素方案
/** * 平行四边形——带有伪元素 */
<a href= "#yolo" class= "button"><div>点我</a></ div >
<按钮类=“按钮”> <div>点我</ div ></ button >
.按钮 {
位置：相对；
显示：内联块；
填充：0.5em 1em；
边框：0；边距：0.5em；
背景：透明；
白颜色;
文本变换：大写；
文字装饰：无；
字体：粗体 200%/ 1 sans-serif；
}
.按钮::之前{
内容： ''; /* 生成盒子 */
位置：绝对；
顶部：0；右：0；底部：0；左：0；
z- 指数：- 1；
背景：#58a；
变换：倾斜（45度）；
}
复制代码
11-菱形图片
介绍两种使用css制作菱形图片的方案，比设计师提供的裁剪图更灵活
基于变形的解决方案
/** * 钻石图像——通过变换 */
<div class= "diamond">
< img src = "http://placekitten.com/200/300" />
</div>
.钻石 {
宽度：250px；
高度：250px；
变换：旋转（45度）；
溢出：隐藏；
边距：100px；
}
.钻石图片{
最大宽度：100%；
变换：旋转（-45度）比例（1.42）；
z- 指数：- 1；
位置：相对；
}
复制代码
剪切路径方案
/** * 钻石图像——通过剪辑路径 */
图像{
最大宽度：250px；
边距：20px；
-webkit-clip-path：多边形（50% 0, 100% 50%, 50% 100%, 0 50%）；
剪辑路径：多边形（50% 0, 100% 50%, 50% 100%, 0 50%）；
过渡：1s；
}
图像：悬停{
-webkit-clip-path: 多边形(0 0, 100% 0, 100% 100%, 0 100%);
剪辑路径：多边形（0 0, 100% 0, 100% 100%, 0 100%）；
}
复制代码
12-倒角效果
背景知识：css渐变、background-size、'striped background'
倒角是一种流行的设计风格。使用css做倒角可以实现更加灵活多样的色彩效果
渐变方案
<div>嘿，重点！你是呃！</div>
/** * 斜角——带渐变 */
分区 {
背景：#58a；
背景：线性渐变（135度，透明15px，#58a 0）左上角，
线性渐变（-135deg，透明 15px，#58a 0）右上角，
线性渐变（-45deg，透明 15px，#58a 0）右下角，
线性渐变（45度，透明15px，#58a 0）左下；
背景大小：50% 50%；
背景-重复：不重复；
填充：1em 1.2em；
最大宽度：12em；
白颜色;
字体：150%/ 1.6 Baskerville, Palatino, serif；
}
复制代码
圆弧倒角
渐变技巧的一种变体
/** * 挖角 */
分区 {
背景：#58a；
背景：径向渐变（左上角的圆圈，透明 15px，#58a 0）左上角，
径向渐变（右上角的圆圈，透明 15px，#58a 0）右上角，
径向渐变（右下角的圆圈，透明 15px，#58a 0）右下角，
径向渐变（左下角的圆圈，透明 15px，#58a 0）左下角；
背景大小：50% 50%；
背景-重复：不重复；
填充：1em 1.2em；
最大宽度：12em；
白颜色;
字体：130%/ 1.6 Baskerville, Palatino, serif；
}
复制代码
内联 SVG 和边框图像方案
/** * 斜角 - 带有边框图像和内联 SVG */
分区 {
边框：21px 纯透明；
边框图像：1 url（'数据：图像/svg+xml，\<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a"> \<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" /> \</svg> ');
背景：#58a；
背景-剪辑：填充框；
填充：.2em .3em；
最大宽度：12em；
白颜色;
字体：150%/ 1.6 Baskerville, Palatino, serif；
}
复制代码
剪切路径方案
强烈推荐这个，可以更方便地制作大量不同颜色的切角图片，只需要更改背景颜色即可。
/** * 斜角 - 带有剪辑路径 */
分区 {
背景：#58a；
-webkit-clip- 路径：
多边形（20px 0，计算（100% - 20px）0，100% 20px，100% 计算（100% - 20px），
计算（100% - 20px）100%，
20px 100%, 0 计算(100% - 20px), 0 20px);
剪辑路径：
多边形（20px 0，计算（100% - 20px）0，100% 20px，100% 计算（100% - 20px），
计算（100% - 20px）100%，
20px 100%, 0 计算(100% - 20px), 0 20px);
填充：1em 1.2em；
最大宽度：12em；
白颜色;
字体：150%/ 1.6 Baskerville, Palatino, serif；
}
复制代码
13-梯形标签
背景知识：基本3D变形，“平行四边形”
方案一：伪元素做两条斜边，边框做上下平行边
解决方案2：3D旋转，普通3D旋转会有文字变形等副作用
<!-- This HTML is invalid and just for demo purposes. Don 't use multiple main elements! --><nav><a href="#">首页</a><a href="#" class="selected">项目</a><a href="#">关于</a></nav><main>内容区</main><nav class="left"><a href="#">首页</a><a href="#" class="selected">项目</a><a href="#">关于</a></nav><main>内容区</main><nav class="right"><a href="#">首页</a><a href="#" class="selected">项目</a><a href="#">关于</a></nav><main>内容区</main>/** * 梯形标签 */ body { padding: 40px;字体：130%/2 Frutiger LT Std，无衬线； } 导航 { 位置：相对； z-index：1；左填充：1em； } 导航 > a { 位置：相对；显示：内联块；填充：.3em 1em 0；颜色：继承；文字装饰：无；边距：0 -.3em； } 导航 > a::before, main { 边框：.1em 实心 rgba(0,0,0,.4); } 导航 a::before { 内容：' '; /* 生成盒子 */ position: absolute;顶部：0；右：0；底部：0；左：0； z 指数：-1；边框底部：无；边界半径： .5em 。 5em 0 0;背景：#ccc 线性梯度（hsla(0,0%,100%,.6), hsla(0,0%,100%,0));盒子阴影：0 .15em 白色插图；变换：缩放（1.1，1.3）透视（.5em）旋转X（5度）；变换原点：底部； } nav a.selected { z-index: 2;} nav a.selected::before { background-color: #eee;边距底部：-.08em； } 主 { 显示：块；边距底部：1em；背景：#eee；填充：1em；边界半径：0.15em； } nav.left > a::before { transform : scale(1.2, 1.3) perspective(.5em) rotateX(5deg);变换原点：左下角； } nav.right { padding-left: 2em; } nav.right > a::before { transform: scale(1.2 , 1.3) perspective(.5em) rotateX(5deg);变换原点：右下角； } 复制代码
14-简单的饼图
基于transstorm和animation
/** * 动画饼图 */
.馅饼{
宽度：100px；高度：100px；
边界半径：50%；
背景：黄绿色；
背景图像：线性渐变（向右，透明 50%，currentColor 0）；
颜色：#655；
}
.馅饼::之前{
内容： '';
显示：块；
剩余边距：50%；
高度：100%；
边界半径：0 100% 100% 0 / 50%；
背景颜色：继承；
变换原点：左；
动画：自旋3s线性无限，bg 6s step-end无限；
}
@keyframes 旋转 {
到 { 变换：旋转（.5 转）； }
}
@keyframes bg {
50% { 背景：当前颜色； }
}
复制代码
/** * 静态饼图 */
.馅饼{
显示：内联块；
位置：相对；
宽度：100px；
行高：100px；
边界半径：50%；
背景：黄绿色；
背景图像：线性渐变（向右，透明 50%，#655 0）；
颜色：透明；
文本对齐：居中；
}
@keyframes 旋转 {
到 { 变换：旋转（.5 转）； }
}
@keyframes bg {
50% { 背景：#655; }
}
.馅饼::之前{
内容： '';
位置：绝对；
顶部：0；左：50%；
宽度：50%；高度：100%；
边界半径：0 100% 100% 0 / 50%；
背景颜色：继承；
变换原点：左；
动画：自旋50s线性无限，bg 100s step-end无限；
动画播放状态：暂停；
动画延迟：继承；
}
复制代码
SVG 方案
/** * 饼图——带有 SVG */
.馅饼{
宽度：100px；
高度：100px；
显示：内联块；
边距：10px；
变换：旋转（-90度）；
}
SVG {
背景：黄绿色；
边界半径：50%；
}
圆圈 {
填充：黄绿色；
中风：#655；
笔画宽度：32；
}
@keyframes 增长 { 到 { stroke- dasharray: 100 100 } }
.馅饼。动画圈{
动画：增长2s无限线性；
}
复制代码
15 — 单面投影
单面投影
/** * 单面阴影 */
分区 {
宽度：1.6 英寸；
高度：1 英寸；
背景：#fb3；
box-shadow 阴影：0 5px 4px -4px 黑色；
}
复制代码
相邻投影
/** * 单面阴影 */
分区 {
宽度：1.6 英寸；
高度：1 英寸；
背景：#fb3；
box-shadow 阴影：3px 3px 6px -3px 黑色；
}
复制代码
双边投影
/** * 单面阴影 */
分区 {
宽度：1.6 英寸；
高度：1 英寸；
背景：#fb3；
box-shadow 阴影：5px 0 5px -5px 黑色，
-5px 0 5px -5px 黑色；
}
复制代码
16 — 不规则投影
<div class= "speech">会话框</div>
<div class="dotted"> 虚线边框</ div >
< div class = "cutout" > 切角</ div >
/** * 不规则阴影 */
分区 {
位置：相对；
显示：inline-flex；
弹性方向：列；
证明-内容：居中；
垂直对齐：底部；
box-sizing：边框框；
宽度：5.9em；
高度：5.2em；
边距：0.6em；
背景：#fb3；
/*box-shadow: .1em .1em .3em rgba(0,0,0,.5);*/
-webkit- 过滤器：阴影阴影（.1em .1em .1em rgba(0, 0, 0, .5));
过滤器：阴影阴影（.1em .1em .1em rgba（0, 0, 0, .5））；
字体：200%/ 1.6 Baskerville, Palatino, serif；
文本对齐：居中；
}
.演讲 {
边界半径：0.3em；
}
.演讲::之前{
内容： '';
位置：绝对；
顶部：1em；
右：-.7em；
宽度：0；
高度：0；
边框：1em 实心透明；
左边框颜色：#fb3；
右边框宽度：0；
}
.点{
背景：透明；
边框：.3em 点缀#fb3；
}
.剪下 {
边框：0.5em 实心#58a；
边框图像：1 url（'数据：图像/svg+xml，\
宽度=“3”高度=“3”填充=“%23fb3”>\<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/> \</svg> ');
背景-剪辑：填充框；
}
复制代码
17-染色效果
基于过滤器的解决方案
/** * 颜色着色 - 使用过滤器 */
图像{
最大宽度：640px；
过渡：1s 过滤器，1s -webkit-filter；
-webkit-过滤器：棕褐色（）饱和（4）色调-旋转（295度）；
过滤器：棕褐色（）饱和（4）色调旋转（295度）；
}
图像：悬停，
图像：焦点{
-webkit- 过滤器：无；
过滤器：无；
}
复制代码
基于混合模式的解决方案
/** * 颜色着色 - 具有混合模式 */
.有色图像 {
宽度：300px；高度：440px；
背景尺寸：封面；
背景色：hsl(335, 100%, 50%);
背景混合模式：亮度；
过渡：0.5 秒背景色；
}
.有色图像：悬停{
背景颜色：透明；
}
复制代码
18-磨砂玻璃效果
背景知识：PGBA/HSLA 颜色，滤镜：blur()
/** * 磨砂玻璃效果 */
身体 {
最小高度：100vh；
box-sizing：边框框；
边距：0；
填充-顶部：计算（50vh - 6em）；
字体：150%/ 1.6 Baskerville, Palatino, serif；
}
身体，主要：：之前{
背景：url（“http://placekitten.com/200/300”）0/封面固定；
}
主要的 {
位置：相对；
边距：0 自动；
填充：1em；
最大宽度：23em；
背景：hsla(0, 0%, 100%, .25) 边框；
溢出：隐藏；
边界半径：0.3em；
box-shadow 阴影：0 0 0 1px hsla(0, 0%, 100%, .3) inset,
0 .5em 1em RGBA(0, 0, 0, 0.6);
文字阴影阴影：0 1px 1px hsla(0, 0%, 100%, .3);
}
主要::之前{
内容： '';
位置：绝对；
顶部：0；右：0；底部：0；左：0；
边距：-30px；
z- 指数：- 1；
-webkit- 过滤器：模糊（20px）；
过滤器：模糊（20px）；
}
块引用{字体样式：斜体}
blockquote cite { 字体样式：正常； }
复制代码
19-倒角效果
背景知识：css变换、css渐变、“切角效果”
45度角解决方案
/** * 折角效果 */
分区 {
宽度：12em；
背景：#58a； /* 倒退 */
背景：
线性渐变（到左下角，透明 50%，rgba(0, 0, 0, .4) 0) 100% 0 不重复，
线性渐变（-135deg，透明 1.5em，#58a 0）；
背景大小：2em 2em，自动；
填充：2em；
白颜色;
字体：100%/ 1.6 Baskerville, Palatino, serif；
}
复制代码
其他角度的解决方案
/** * 折角效果——在一个角度 */
分区 {
位置：相对；
宽度：12em；
背景：#58a； /* 倒退 */
背景：线性渐变（-150度，透明1.5em，#58a 0）；
填充：2em；
白颜色;
字体：100%/ 1.6 Baskerville, Palatino, serif；
边界半径：0.5em；
}
div::之前{
内容： '';
位置：绝对；
顶部：0；右：0；
宽度：1.73em；高度：3em；
背景：线性渐变（到左下角，透明 50%，rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .4)) 100% 0 不重复；
变换： translateY(- 1.3em) 旋转(-30deg);
变换原点：右下角；
边界左下角半径：0.5em；
盒子阴影阴影：-.2em .2em .3em -.1em rgba(0, 0, 0, .15)
}
复制代码
总结
本文整理了《CSS Revealing》中19个有趣的CSS技巧案例，下面将继续整理剩下的28个。
文章合集：
版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。
这篇文章的链接： https://homecpp.art/1501/6263/1743
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/10952/46470208
标签：19,47,100%,50%,1em,边框,背景,渐变,CSS From： https://www.cnblogs.com/amboke/p/16648548.html