大家用CSS写一个极简风格的小键盘，和之前做拟态风格按钮的思路是一样的，都是通过多层阴影叠加起来形成这种立体感。元素非常简单，现在写了一些基本的样式，其它样式重新来写。

·现在是一个带有圆角和渐变色的小方块，就这样子在这里。接下来把它的阴影一层一层的画出来，继续。现在叠加了右下角的这块阴影，看起来就有一种悬浮的感觉了。

·接下来写个伪元素，通过定位配合一下inset，把它的盒子大小撑开，同样也是给个渐变颜色，再加一点圆角来看一下。

·接下来写伪元素的阴影，这一层也是比较淡的，在右下角的一层阴影来看一下，没有问题，右下角这些地方加了一层。

·接下来给伪元素的上边、下边和左边都加一点边框，看起来更加有质感一点。这里放大给大家看，加了一点边框，这三个方向都加了。

·接下来再给外面span加两层内阴影，现在这个是加在右边了，刷新没有问题，相当于在这个按键的底部又加了一层，这样这个按键的样式就写好了。

·接下来就多写几个按键，都是套用这个样式，再把上面的字母写上去就可以了。C这个字母出来了，剩下几个都是一样的，直接写出来，没问题。

·在CSS这里换一下行，再来个空格键，最后一个让它的宽度撑满。

这个视频就到这里，感谢大家的收看。

.字符串replaceAll()方法

要在 JavaScript 中从字符串中删除所有空格，请在字符串上调用 replaceAll() 方法，将包含空格的字符串作为第一个参数传递，将空字符串 ('') 作为第二个参数传递。 例如， str.replaceAll(' ', '') 从 str 中删除所有空格。

const str = 'A B C';
const allSpacesRemoved = str.replaceAll(' ', '');console.log(allSpacesRemoved); // ABC

String replaceAll() 方法返回一个新字符串，其中模式的所有匹配项都被替换替换。 第一个参数是要匹配的模式，第二个参数是替换。 因此，将空字符串作为第二个参数传递会用空替换所有空格，从而将它们删除。

笔记

JavaScript 中的字符串是不可变的，replaceAll() 返回一个新字符串而不修改原始字符串。

const str = 'A B C';
const allSpacesRemoved = str.replaceAll(' ', '');console.log(allSpacesRemoved); // ABC// Original not modified
console.log(str); // A B C

2.字符串replace()方法和正则表达式

或者，我们可以通过调用字符串的 replace() 方法从字符串中删除所有空格，将匹配任何空格的正则表达式作为第一个参数传递，并将空字符串 ('') 作为第二个参数。

const str = 'A B C';
const allSpacesRemoved = str.replace(/ /g, '');console.log(allSpacesRemoved); // ABC

我们使用 g 正则表达式标志来指定字符串中的所有空格都应该匹配。 如果没有这个标志，只有第一个空格会被匹配和替换：

const str = 'A B C';// No 'g' flag in regex
const spacesRemoved = str.replace(/ /, '');// Only first space removed
console.log(spacesRemoved); // AB C

String replace() 方法返回一个新字符串，其中所有匹配项都替换为传递给它的第二个参数。 我们传递一个空字符串作为第二个参数，以将所有空格替换为空，从而将它们删除。

笔记

与 replaceAll() 一样，replace() 返回一个新字符串而不修改原始字符串。

const str = 'A B C';
const spacesRemoved = str.replace(/ /g, '');console.log(spacesRemoved); // ABC// Original not modified
console.log(str); // A B C

小费

我们指定的正则表达式只匹配字符串中的空格。 要匹配和删除所有空白字符（空格、制表符和换行符），我们必须使用不同的正则表达式：

const str = 'A B C \t D \n E';
const whitespaceRemoved = str.replace(/\s/g, '');console.log(whitespaceRemoved); // ABC

关注七爪网，获取更多APP/小程序/网站源码资源！

天的主题是网页编程中的水平线。

同学们好，今天我来分享一些免费的少儿编程知识。只要每天坚持学习一行代码，你也可以成为编程高手！今天我们要学习如何在HTML中插入一条水平线，使用的是HR标签。HR是一个自闭合标签，虽然它没有标准的属性，但我们可以通过CSS来控制它的外观。

先来看看我们的实例效果。在页面上，两行文字被一条直线分开。这条直线就是HR标签，效果已经展示出来了。现在我们来看看实现的代码。HR标签的写法非常简单，但在最开始的时候，它有四个属性，现在已经不被标准支持了。尽管如此，我们仍然可以使用它。

今天的实例中，我们已经将这些标签加入到了代码中。如果你感兴趣，可以查看下方的代码。按下空格键可以看到过时的属性不会被智能提示，但这并不影响代码的正确性。将注释取消后保存，然后回到浏览器刷新，可以看到属性仍然有效。线条的高度为3，宽度为400，并且居中显示。取消阴影后，线条将变为纯色。

这只是一个演示，你可以参考一下。从这个示例中，我们可以看到，HR标签的宽度是根据页面宽度自动调整的。当它的宽度达到整个浏览器时，它会自动换行。既然属性已经过时了，那么我们如何通过HTML来控制外观呢？CSS是我们今天要学习的内容。

先取消注释的代码，让HTML失效，然后保存。回到浏览器刷新，就可以看到线条变成了蓝色。

今天的分享就到这里，希望各位同学可以试着写三遍，不需要看视频也可以掌握这个技巧。如果你需要案例和相关文档，可以向我咨询。

我们下期再见，想学习编程的同学记得关注哦。