css 文字投影-CSS编码方式

这本书介绍的方式主要是使用CSS3的知识，其实和写法是兼容的，大家可以自己查一下

查询属性的支持级别条目

浏览器前缀处理工具Autoprefixer

CSS编码方式

1. 减少代码重复

2.了解视觉差异

3.响应式页面设计

4. 正确使用缩写

5.合理使用预处理器

第二章、背景与边框 1、半透明边框

border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;

background-clip属性指定背景的轮廓区域、背景颜色。

2. 多重边界

box-shadow：可接受第四个参数字段，水平倾斜、垂直倾斜、模糊程度、扩展直径

//可用这个方法实现多个边框，但是如果边框是虚线那就不行了
box-shadow: 0 0 0 10px #eee,0 0 0 15px #ddd,0 0 0 20px #ccc;

3.灵活的背景定位

background-position：运行指定背景图像距任意角的偏移量。

background-position: right 20px bottom 20px; 

background-origin：修改背景图片的background-position定位标准。 默认为padding-box；

background-origin:border-box/padding-box/content-box;

background-position: calc(100% - 10px) calc(100% - 10px);

4、边框圆角

为了达到上图的疗效，我们习惯用两个袋子来实现。 下面介绍如何利用袋子来达到上述效果。

background-color: pink;//设置盒子背景颜色
border-radius: 10px;//设置圆角
box-shadow: 0 0 0 10px #655;//设置盒子阴影
outline: 11px solid #655;//设置盒子outline，一般设置比圆角，阴影大一点，为了更好的效果

5.条纹背景

Linear-gradient：直线过渡

Radial-gradient：圆形过渡，从中心开始，颜色过渡

background: linear-gradient(to bottom,#eee 30%,#ddd 30%);
background: linear-gradient(to bottom,#eee 30%,#ddd 0);
background-size: 100% 15px;

斜白（此仅适用于45°倾斜）

background: linear-gradient(45deg,#fb2 25%,#58a 0,#58a 50%,#fb2 0,#fb2 75%,#58a 0);
background-size: 50px 50px;

更好的对角白色

background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0,#58a 30px);

灵活的同色系白色

background: #58a;
background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 0, transparent 30px);

6.复杂的背景图案

网格

background: white;
background-image: 
linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;

background: #58a;
background-image: 
linear-gradient(white 1px,transparent 0),
linear-gradient(90deg, white 1px,transparent 0);
background-size: 30px 30px;

background: #58a;
background-image:
        linear-gradient(white 2px,transparent 0),
        linear-gradient(90deg, white 2px,transparent 0),
        linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
        linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
background-size: 75px 75px,75px 75px,15px 15px,15px 15px;

波尔卡圆点

棋盘

background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red );

7. 伪随机背景

获得不同颜色和长度的垂直下摆。

8. 连续图像边框

border-image的工作原理是九宫格拉伸法，将图像切割成9块，然后将它们应用到元素边框的相关边和角上。

蚂蚁行军的疗效

第 3 章，形状 9，自适应椭圆

当任意两个相邻圆角的直径之和超过边框框的大小时，用户代理必须按比例减小每个边框直径使用的值，直到它们不再相互重叠。

border-radius 鲜为人知，可以分别指定水平和垂直直径，两个值可以用斜杠 / 分隔

半椭圆

四分之一椭圆

10.平行四边形

嵌套元素方案：使用两个袋子，外层袋子使用skew()变形，内容反转使用skew()变形（不推荐）

伪元素方案：将所有样式应用到伪元素上，然后修改伪元素。

这个想法还可以应用到其他疗效上：

例如实现IE8以下的多背景

边框圆角

11. 菱形图像

基于变体的方法

剪切路径方案

12、切角的疗效

使用接受角度作为方向的渐变效果，然后使用线性渐变

四个角

圆弧倒角

13. 梯形图页签

通过改变属性而不是内部行距来改变它的规格，以避免在不支持3D的浏览器中出现奇怪的样式。 已经证明，垂直方向缩放1.3倍可以弥补其高度的收缩

通过将transform-origin更改为左下或右下，可以获得两侧有斜度或两侧有斜度的标签。 但底边的角度取决于元件的间距。 如果长度不同，则很难获得斜率一致的矩形。 宽度变化不大，效果很好。

14.简单的饼图

使用CSS动画实现饼图从0%变化到100%的动画。

SVG解决方案

角渐变

第四章视觉效果15、单边投影

单面投影：使用box-shadow的第四个厚度参数，扩展直径通常设置为模糊直径的相反值

box-shadow: 0 5px 4px -4px black;

邻边投影：扩展直径通常设置为模糊直径相反值的一半，水平和垂直连接距离通常小于或等于模糊直径的一半

box-shadow: 3px 3px 6px -3px black;

双边投影：四个方向的扩张直径相等。唯一的办法是使用两个投影（每侧一个）来实现

box-shadow: 5px 0 5px -5px black,
            -5px 0 5px -5px black;

16. 不规则投影

利用SVG引入的滤镜新属性，可以使用一些函数来实现指定的滤镜效果。 如blur()、grayscale()、drop-shadow()

drop-shadow()：与box-shadow基本相同，但不能接受第四个扩展参数，不包含insert关键字，不支持冒号分隔的多层投影语句。

能顺利降解。 可以附加 SVG 过滤器以获得更好的支持。 您可以在滤镜效果模型中找到每个滤镜对应的SVG滤镜版本。 还可以将 SVG 过滤器与简化的 CSS 过滤器结合起来，并让级联机制确定应用哪些行。

filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));

drop-shadow() 的本质是在任何不透明的部分投射阴影。 文字也不例外。 text-shadow: none 不可取消。如果设置了文字投影，也会投影在投影上

17、染色功效

使用伪元素为图像添加一层遮罩

过滤器解决方案

sepia()：减少去饱和橙黄色染色效果对图片的影响，几乎所有像素的色调值都会收敛到35~40

saturate()：增加每个像素的饱和度

hue-rotate()：将每个像素的色调倾斜指定的程度。

filter: sepia(1) saturate(4) hue-rotate(295deg);

基于混合模式的解决方案

第一种方法：盒子包裹图片，盒子背景色设置为你想要的主色，图片设置为混合模式

第二种方法：用一个包来设置背景，第一层是要染色的图片，第二层是你想要的主色

18、磨砂玻璃的功效

然而，我们想要模糊文本层覆盖的图像区域。

直接使用滤镜：blur(5px); 也会模糊文本。

解决方案：处理一个伪元素并将其放置在元素顶部，其背景将与背景图像无缝匹配。 如果浏览器不支持过滤器，您看到的结果将是上图。

19.角度疗效

以前：使用伪元素实现。 有限制，背景不是黑色，45°以外的角不可接受。 。 。

45°指关节角的解法，注意规格书的数值，保证指关节的宽度为2em，需要用勾股定理来计算，该值为2的根

其他角的解，根据勾股定理计算，就是小角的厚度。 30度，

实际上，折角需要旋转

第 5 章，版式 20，连字符

不提倡使用text-align: justify;

CSS v3 的新属性 hyphens 接受 3 个值：none、manual 和 auto。为此，需要在 HTML 标记的 lang 属性中指定适当的语言

21.插入换行符

对应的名称和值在一行上

22. 斑马白用于文本行

以前，:nth-child() 技巧用于实现斑马白。

解决方案：为整个元素设置统一的背景图片。 修改行高时记得改变背景大小

23.调整标签长度

tab-size：css的第三个版本，接受一个数字，表示字符数或宽度值（这不太实用）。 通常设置为 4 或 2。

pre {tab-size: 2; }

24. 连字

字体变体连字：普通连字、任意连字、历史连字；

CSS3的属性

25.华丽的&符号

导入字体样式

26.自定义逗号

之前：使用border-bottom或box-shadow来设置，但与文本会有较大距离，阻止正常的文本换行行为

解决方案：使用 CSS 背景和边框（第三版）

虚线

你也可以考虑波浪线---使用两层渐变

27.言语在现实中的疗效

凸版印刷效果，

当背景浅、文字深时，投影为黑色，透明度80%时投影为红色，效果不错

当背景较暗、文字较亮时，投影为红色

疗效

您还可以使用多层稍微模糊的投影来模拟蒙版，由于模糊算法，这会更消耗性能

这个方法，如果面膜很厚css 文字投影css 文字投影，效果会特别差

但是我们可以使用SVG方案，但是会在结构中插入很多乱七八糟的东西，但是效果还是不错的

文本外发光的效果，但是如果不支持text-shadow，字体模糊的效果会导致部分字符看不到。 可以使用滤镜来达到文字模糊的效果

支持这种支持的浏览器会比较少，但是如果不支持的话，你可能会看到这样的字体

文字提升疗效

复古效果：将所有阴影设置为红色。

28.铃声文本

可以通过js动态添加

第六章用户体验 29. 选择合适的键盘光标提示禁用状态隐藏键盘光标 30. 展开可点击区域

添加透明边框。 为了防止背景颜色扩展到边框，可以使用background-clip:padding-box。 如果需要边框，请使用 box-shadow 设置

但这些技巧会影响布局，伪元素也可以替换其宿主元素来响应键盘交互，而不影响布局

31.自定义复选框

当标签元素与复选框关联时，它还可以充当触发开关

当它获得焦点或禁用时也会更改其样式

开关按钮，但很容易与普通按钮混淆，误以为按下会触发动作

32.使用阴影柔化背景

一般：添加额外的 HTML 元素层以遮挡背景

伪元素方案：问题是很难绑定独立的js风暴处理

Box-shadow方案：两个问题：设置其大小的问题，以及无法阻止键盘交互点击

Backdrop解决方案：兼容性问题，不完全支持，谨慎使用

dialog::backdrop {background: rgba(0, 0, 0, .8);}

33.通过模糊来柔化背景

当我们聚焦于较近的物体时，远处的背景是散景的

解决方案：通过向底层元素添加一个类并对其应用模糊滤镜，添加动画将遵循自然规律。但是，此解决方案没有后备解决方案。 可以参考之前的box-shadow效果，但是存在不同的问题。

transition: .6s filter;
filter:blur(5px) contrast(.8) brightness(.8);

34. 滚动提示

35.交互式图片对比控件

CSS 调整大小方案

resize：适用于任何元素，只要其溢出不可见即可，默认为none，即严格禁止resize的特性。 除了两者之外，它的值还有水平和垂直，可以限制元素调整大小的方向。

问题1：div的长度被拉伸超出了图片的长度，解决方案：设置最大长度，max-width: 100%；

问题2：调整摇杆不易识别，解决方法：

设置用户选择：图片无； 如果用户在摇杆下方拖动键盘而不点击，则不会误选图片

范围输入控制方案

。 。 。 。 。 。

第 7 章，结构和布局 第 36 章，自适应内部元素

要求：宽度也可以与高度相同，外袋适应内袋的长度而不是由其父袋决定，并且水平居中。 也就是说，它的长度是由内部激励决定的，而不是由外部激励决定的。

解决方案：CSS 内部和外部规范模型（第三版）是一个较新的规范，它定义了一些新的宽度和高度关键字，最有用的是 min-content。 该关键字将解析为该容器内最大不间断元素的长度。

理解：其他值都有max-content，和inline-block类似，fit-content的效果和浮动元素一样

37.精确控制表格行高

问题：对于不固定的内容，布局更加困难，因为行高根据其内容进行调整

解决方案：使用CSS2.1的属性table-layout，其默认值为auto，即手动表格布局算法。 您还可以接收另一个固定值，该值更可控。

使用时，只需在具有 display:table 样式的元素或其他元素上使用此属性即可。为此，您需要为 table 元素指定长度，并为 text-overflow:ellipsis 指定长度； 要工作，您需要指定该列的长度

38.根据兄弟元素数量设置样式

要求：仅当列表项总数为 4 时才设置列表样式

解决方案： :only-child 相当于：first-child:last-child，即第一项和最后一项

li:first-child:nth-last-child(1) {
 /* 相当于li:only-child */
}
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
 /* 当列表正好包含四项时，命中所有列表项 */
}
li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4) ~ li {
 /* 当列表至少包含四项时，命中所有列表项 */
}
li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li {
 /* 当列表最多包含四项时，命中所有列表项 */
}
li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li {
 /* 当列表包含2～6项时，命中所有列表项 */
}

39.全角背景，固定宽度内容

之前：使用两层 HTML 元素，一层用于背景，一层用于内容

解决方案：使用cale()

40. 垂直居中

过去：表格布局法、内联块法

基于绝对定位的解决方案

问题：

基于图层单元的解决方案

基于Flexbox的解决方案展示：flex

41. 固定在顶部的页码

固定高度方案：该方案要求脚注文字不换行，脚注规格改变时要进行相应的改变

更灵活的解决方案：使用flex布局

第 8 章，过渡和动画 42，缓动效果

弹跳动漫

弹性过渡

。 。 。 。 。

43.逐帧动画

主要采用steps()的调速函数，而不是基于贝塞尔曲线的调速函数。

Steps()：动画会按照你指定的步数分成多个帧，整个动画会在帧之间进行硬切，不做任何配准处理。 一般情况下，我们会尽量避免这些硬剪效果，但如果动画加载的是图片，这个效果就更有用了。

44、眨眼疗效

animation-direction：alternate是偶数循环，alternate-reverse是奇数循环。

它同时反转调整功能，从而产生越来越逼真的动画效果。

或使用步骤()

45. 打字动画

解决方案：核心思想是让容器的长度成为动画的主体；

ch：是CSS3中引入的新单位，代表“0”字形的长度。在等宽字体中，“0”字形与所有其他字形具有相同的长度

存在兼容性问题。

46.具有平滑状态的动画

提供与背景图像平滑连接的包显示。

47. 沿圆形路径平移动画

头像是倒过来的

需要二元解决方案：利用外层的变形来抵消内层的变形效果

单元件解决方案

每个transform-origin可以通过两个translate()来模拟，下面的代码实际上是等价的

我终于读完了这本书。 整个过程是断断续续的，我读得很慢。 当我读完它时，我几乎忘记了它。 有一些收获，但不是很大。 本书中很多知识点都使用了CSS3知识点，所以使用时要注意兼容性问题。 。 无论如何，这是一个好的开始！ ！ ！ 快点！ ！ ！