整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
近碰到这样一个问题，在一张封面上直接显示书名，可能会存在书名看不太清楚的情况（容易受到背景干扰），如下
image-20221210163633853
为了解决这个问题，设计师提了一个“究极”方案，将书名背后的图片模糊一下，这个在 CSS 中很好实现，仅需backdrop-filter即可
.name{
backdrop-filter: blur(10px);
}
当然，现在模糊是模糊了，但是边缘过于“断层”，导致书名和封面有些“格格不入”，效果如下
image-20221210163925282
如果能够将边缘羽化一下，虚化边缘效果，就可以很好地将书名融入到背景当中
羽化是photoshop术语，羽化原理是令选区内外衔接部分虚化，起到渐变的作用从而达到自然衔接的效果，是ps及其其它版本中的处理图片的重要工具
这是设计最终羽化后的效果，既能保证文字清晰可见，又能避免太过突兀，如下
image-20221210165427443
设计师实现这个很简单，用橡皮擦擦一下就可以了，那么 CSS 呢？下面来探讨一下 CSS 如何实现羽化的效果。
羽化其实就是将边缘变得模糊，在 CSS 中其实就是创建一个边缘模糊的遮罩（mask），也就是需要一种半透明的渐变。
关于遮罩，这里简单介绍一下，基本语法很简单，和background的语法基本一致
.content{
-webkit-mask: '遮罩图片' ;
}
/*完整语法*/
.content{
-webkit-mask: '遮罩图片' [position] / [size] ;
}
这里的遮罩图片和背景的使用方式基本一致，可以是PNG图片、SVG图片、也可以是渐变绘制的图片，同时也支持多图片叠加。
遮罩的原理很简单，最终效果只显示不透明的部分，透明部分将不可见，半透明类推
img
先举个圆形的例子，这个比较简单，因为可以直接通过径向渐变创建
比如，下面有一个头像，现在直接放在背景上非常突兀
image-20221210172243765
我们可以将这个头像通过径向渐变绘制出了一个从不透明到透明的遮罩，达到和背景融合的效果
.head{
-webkit-mask: radial-gradient(closest-side circle,#000 60%, transparent 100%);
}
原理是这样的
image-20221210173118913
最后效果如下
image-20221210172534020
当然这是圆形的，如果是矩形的呢？
根据上面的分析，如果希望羽化矩形边缘，需要创建这一个遮罩
image-20221210174740599
那么问题来了，如何创建这一个边缘模糊的矩形呢？貌似没办法直接通过渐变来实现，而且还需要是尺寸自适应的（自动跟随容器尺寸）
如果单纯看这样一个矩形，还是很容易实现的，通过box-shadow即可实现
.shadow{
width: 200px;
height: 200px;
background:black;
border-radius:10px;
box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
}
根据需求，**可以多叠加几层box-shadow**，这里叠加了3层，效果如下
image-20221210175454541
但是问题又来了，这样一个 dom 无法直接用作mask-image，那如何处理呢？
上面提到，通过 CSS 阴影可以很轻松的实现我们说需要的效果，但可惜现在还是 dom 阶段，所以需要将这个 dom 转换成图像。
在这里，需要借助 SVG 中的foreignObject[1]元素，通过这个元素，可以将 HTML嵌入到SVG中，轻松实现 dom 转图片的效果
有兴趣的可以参考之前这几篇文章
CSS、SVG、Canvas对特殊字体的绘制与导出
CSS & SVG foreignObject 实现文字镂空波浪动画
原理如下
回到这里，我们仅需要将上面的结果放到foreignObject元素中，由于需要自适应尺寸，这里的body宽高都是100%，如下
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100%" height="100%">
<body class="wrap" xmlns="http://www.w3.org/1999/xhtml">
<style>
.wrap{
box-sizing: border-box;
margin: 0;
height: 100%;
padding: 10px;
}
.shadow{
height: 100%;
background:black;
border-radius:10px;
box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
}
</style>
<div class="shadow"></div>
</body>
</foreignObject>
</svg>
这样就得到了一个宽高自适应的SVG图像，无论宽高怎么变化，都是撑满的
image-20221210180715580
别看这么多标签，这其实已经是一张图片，可以直接使用，接下来看看如何运用
其实上面得到的 SVG可以直接当成一个图片资源，正常使用了，就像这样
.name{
-webkit-mask: url('./fearher.svg')
}
不过，也可以将这个SVG图片转换成内联形式，减少资源依赖，转换后仍然保持自适应特性
这里推荐张鑫旭老师的SVG在线压缩合并工具 [2]
转换后就是这个样子
.name{
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cbody class='wrap' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cstyle%3E.wrap%7Bbox-sizing:border-box;margin:0;height:100%25;padding:10px%7D.shadow%7Bheight:100%25;background:%23000;border-radius:10px;box-shadow:0 0 5px %23000,0 0 10px %23000,0 0 15px %23000%7D%3C/style%3E%3Cdiv class='shadow'/%3E%3C/body%3E%3C/foreignObject%3E%3C/svg%3E")
}
效果如下
Kapture 2022-12-10 at 18.23.20
而且由于尺寸是动态的，换个书名也能完美适应
image-20221210221842455
最后再来对比一下，下面哪个一眼看上去效果最好？
image-20221210183113086
完整代码可以查看以下任意链接
以上就是本文全部内容了，一个还不错的绘制小技巧，最后来回顾一下一些实现要点
当然本文最重要的一点是，如何在 HTML 严重受限的背景上绘制一些常见的图形，以后碰到类似的需求也可以朝这个方向去考虑，最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤
[1]
foreignObject: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject
[2]
SVG在线压缩合并工具 : https://www.zhangxinxu.com/sp/svgo/
[3]
CSS feather (juejin.cn): https://code.juejin.cn/pen/7175466278134480908
[4]
CSS feather (codepen.io): https://codepen.io/xboxyan/pen/ZERZrQw
[5]
CSS feather (runjs.work): https://runjs.work/projects/51eece3c132040f2
在数字世界的浩瀚海洋中，CSS如同一位魔法师，用其强大的魔力将网页元素点缀得绚丽多彩。从简单的文字排版到复杂的动画效果，从单调的背景色彩到渐变的光影变幻，CSS都以其独特的方式赋予网页生命力。
今天，我将带你走进CSS的魔法世界，探索那些最实用、最炫酷的CSS技巧。无论你是刚刚入门的初学者，还是经验丰富的老手，相信你都能从中获得启发和灵感，让你的网页设计更加出色！
接下来，就让我们一起踏上这场充满魔力的CSS之旅吧！
以下是10个高级的CSS技巧，并附有相应的代码示例：
CSS 变量（也称为 CSS 自定义属性）允许你在一个集中的位置定义一组值，然后在整个文档或项目中多次引用这些值。
:root {
--main-color: #007BFF;
}
.button {
background-color: var(--main-color);
color: white;
}
CSS Grid 是一个二维布局系统，可以同时处理行和列。它非常适合构建复杂的网页布局。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}
Flexbox 是一个一维布局模型，主要用于处理行内元素的布局、对齐和分布空间。
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
伪元素（如 ::before 和 ::after）和伪类（如 :hover 和 :focus）提供了更多的样式和控制能力。
a::after {
content: " →";
}
input:focus {
outline: none;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
混合模式允许你定义元素如何与其背景或相邻元素混合。
.blend-mode {
background-color: red;
mix-blend-mode: multiply;
}
CSS 滤镜可以对元素应用图形效果，如模糊、亮度、对比度等。
img {
filter: grayscale(100%);
}
滚动捕捉允许你创建滚动视图，其中的滚动停止位置可以“捕捉”到元素的特定位置。
.scroll-container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 300px;
}
.scroll-item {
scroll-snap-align: start;
height: 100%;
/* 其他样式 */
}
clip-path 属性允许你创建复杂的裁剪区域。
.clipped {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
CSS 遮罩允许你使用图像或渐变作为遮罩层，从而只显示元素的特定部分。
.masked {
-webkit-mask-image: url('mask.png');
mask-image: url('mask.png');
}
虽然直接样式化滚动条的支持有限，但你可以使用伪元素和浏览器特定的属性来尝试自定义滚动条的外观。
/* Webkit-based browsers */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
请注意，一些高级技巧（如滚动捕捉、形状裁剪和遮罩）可能在一些旧版浏览器或特定浏览器上不受支持。在使用这些技巧时，请确保测试你的设计在所有目标浏览器上都能正常工作。
目前大多数人对于CSS的使用只是停留在基本层面，设置位置，宽高，背景色等等。但是CSS还有很多的高级使用技巧，在开发时省去很多时间。
今天我们就一起来看看CSS中的一些高级使用技巧，让你的页面更加的炫酷吧。
CSS
如何将一张彩色的图片在页面上展示成黑白图片呢？
我们需要用到一个filter属性，在webkit中，-webkit-filter专门为元素的渲染提供一些效果，比如灰度，亮度，模糊等。
使用灰度控制grayscale属性，就可以很容易的将图片置为黑白色。
我们看到下面一张图片。
原始图片
当我们加上以下一段代码后。
CSS代码
可以看到图片如下所示。
处理过的图片
有的时候我们将网页的顶部设置为阴影效果，这个是怎么做到的呢？
利用body的伪元素:before，可以减少额外的元素。
在顶部增加一个div，设置一个高度，宽度为100%
将其position设置为fixed，然后设置偏移量为设定的高度值。
设置box-shadow属性，值等于设定的高度值。
得到的代码如下所示。
页面顶部加阴影
运行完上述代码后，就可以看到整个页面顶部有阴影的效果。
假如有一个很简单的页面，需要所有的元素都垂直居中显示，实现的方法其实很简单。
将与align有关的属性设置为center。
displag设置为flex。
得到的代码如下所示。
垂直居中的CSS方法
设置以后，我们可以看到不管将窗口设置为多高，所有元素都是垂直居中的状态。
但是这种方法有个弊端，就是会将所有元素水平排列，垂直居中，页面元素过多时，页面会被水平撑开，不太美观。
因此这种方法建议在页面元素少的情况下使用。
元素垂直居中
在一个使用ul>li创建的列表中，如果想要选择其中的几个元素，我们可以使用nth-child选择器，例如:nth-child(1)代表第一个元素。
那么假如我们想选择第一个到第三个元素，使用nth-child该怎么做呢？
很多人第一选择是:nth-child(1)，:nth-child(2)，:nth-child(3)，然后设置属性。
其实还有一种更简单的方法，那就是使用负数选择器。
:nth-child(-n+3)，就代表选择从第一个到第三个元素。
我们可以通过以下例子测试，首先在看看页面的HTML代码，并将它们的display全部设置为none，这样就可以将li全部隐藏起来。
HTML代码
然后通过nth-child选择器设置css属性。
nth-child选择器
最后看看页面上的内容呈现，可以看出实际选中的li只有前三个，符合预期。
页面内容
页面的table元素，如果不对tr>td设置宽度，列td的宽度是会随着内容的变化而变化，这样就会造成页面布局很难看。
我们可以将表格的每列设置成相同的宽度，这样不管内容怎么变化都不会改变页面的布局。
只需要使用如下一个属性即可。
表格列等宽
实际的效果如下图所示。
表格列等宽
在CSS3中新增了一个calc()方法，用于动态的计算值，不管是数值还是百分比，都可以参与计算。
这个方法非常适用于自适应的容器中，动态计算宽高，间距(margin,padding)，边框(border)等值，这样在容器大小变化的时候，不会改变元素之间的布局。
例如以下我们定义的两个div。
CSS属性
看到的页面效果如下图所示。
calc()效果
假设在页面上有一个很重要的区域，只是只读的，不能让鼠标点击，可以直接禁用掉鼠标点击事件。
这个在CSS3中新增了pointer-event属性，只要将其设置为none即可。
禁用鼠标点击
有的时候我们可以看到页面上有一些文字渐变的效果，如下图所示。
渐变文字
这个效果是怎么实现的呢?
通过设置伪元素，然后在伪元素中使用-webkit-mask-image属性，这个属性是专门用来产生遮罩效果的。
然后将遮罩效果的字与原来的文章重合，就可以达到上述效果。
我们设置一个h2标签，然后设置data-text属性，date-text属性值与页面显示值一样。
HTML元素
然后设置对应的CSS属性。
CSS属性
当我们在页面运行后，我们就可以得到上面的文字渐变效果。
和上面的渐变文本类似，模糊文本也有专门的属性可以设置，那就是text-shadow。
通过下面一段简单的代码，就可以得到模糊文本了。
模糊文本样式
得到的效果如下图所示。
模糊文本
今天这篇文章主要介绍了CSS中几个高级的使用技巧，可以让你在实现相同效果时，减少很多的代码量，提高工作效率。
大家要好好掌握~
*请认真填写需求信息，我们会在24小时内与您取得联系。
