专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。

在之前的网站开发中，我们是很难去更改的你某些控件的颜色。我们可能要使用各种技巧来自定义我们的控件。好消息是，今天如果我们想要去改变控件的颜色，css为我们提供了一些新的属性来进行修改。例如::marker可以用来修改有序列表/无序列表的样式。::marker {想想如果我们想要自定义一个Progress进度条的颜色，我们需要怎么做？除了要考虑不同浏览器的兼容性，还需要设置很多的前提，而且和特性是非标准的，还尽量不要在生产环境中使用它！所以很多时候，我们都是利用其他标签来实现我们的进度条。

你平时见到的上传文件是下面这样的？还是下面这种美化过的样式还是下面这种复杂的上传组件。：只要指定的是类型的input，打开浏览器就是上面第一种原生的浏览器默认的很丑的样式。下面的两种是我从截的图，在实现这两种上传组件的时候，用的是下面的方法:定义负责样式，模拟上传按钮。定义一个默认隐藏的负责打开选择文件的窗口。当点击按钮的时候，会自动调用input的click事件。当然如果你觉得麻烦还有下面这种实现方式：隐藏文件选择输入框，然后使用元素模拟上传按钮，此时点击

前言一个网页中最多的东西是啥? 正常人的第一反映肯定是文字，你要是跟我说是图片，那我只能表示：响应式网页设计中一个很难解决的问题就是文字的大小的问题了，面对千奇百怪的设备，如何解决文字的设配问题，是一个很重要的问题。在上一篇文章学透CSS-合理使用这8个单位,让你的网站Responsive中我们介绍了8个响应式单位，大多数响应式字体的解决方案基本都是依赖于这几个单位来进行解决的。最初：@media下面是两个简单的例子，通过使用媒体查询，改变字体在不同设备下的文字大小。这种做法的缺点在哪里呢？是因

对于网页中的ul，我其实很少关注，或者说我基本不会用它，不过今天我算是见识到了ul的厉害之处，或者说是list-style-type的厉害之处。这个属性无论是ol还是ul都可以使用，同时这个属性所有的浏览器都支持。

总有人觉得CSS就是一个布局的工具，忽视了CSS的重点，CSS的全称是啥？层叠样式表（Cascading Style Sheets）第二个词是啥，样式样式样式！总有人把CSS的强大忽略了。同样的效果，不同的实现方式，总会有好有坏，但是就怕你一种也不会！本文主要通过一个边框的实现方式来学习不同的属性。

最近在制作公司官网的时候，遇到了上传文件按钮。这玩意真的恶心啊。因为没有用框架，在谷歌浏览器中，这家伙长这样，属实是难看啊因为以前用的都是框架内的自带的上传组件，第一次自己手写，真的是没经验！我天真的直接在input上进行了修改。最后却是下面的结果，不说了，基础真的差！！！color: red;

在做响应式网站的时候，我们经常需要考虑的是文字的大小，图片的宽高，盒子的大小等等！对于我个人来说，我是经常使用rem，rem，vh,vw等等响应式单位的。而对于文字的大小，我使用最多的是rem和vw。rem是相对于根元素的大小，vw是相对于视口宽度的大小。

考虑这样一个场景：假设我们有1个div标签，其内部有h1-h5标签。 < h1 > 我是h1 < h2 > 我是h2 < h3 > 我是h3 < h4 > 我是h4 < h5 > 我是h5

，因为浏览器的多样性，各个浏览器在滚动条的样式上，也不统一。当一个网页发不出去，我们尽可能的需要保证样式的一致性，美化滚动条可以解决这个统一的问题，当然了，你一个绚丽的页面，肯定不想出现丑了吧唧的滚动条吧！这里使用两个div。子div主要是用来保证父div可以出现滚动条。

相信每个写CSS的前端人，都会跟滚动打交道。滚动即当元素内部的内容太大超出的时候，元素该怎么做。主要是使用overflow来进行设置。今天在制作横向滚动，展示公司产品的时候，遇到了这样一个问题：当用户滚动的，停下来，定位可能是并不是在某一个产品，显示不全。效果：最后停在的位置是在两个猫咪的中间，两个小猫都看不全。有没有什么方法，当用户滚动停下来的时候，可以自动选择其中的一个猫咪，放在中间。一开始我是使用js来做的。需要监听元素滚动，然后再判断滚动停止，再计算位置，贼麻烦。感觉自己是个假前端。

在CSS Selectors 4规范中，CSS 引入了一个名为 的新选择器:has()，它最终让我们可以选择父级。这意味着我们可以选择具有特定元素的父元素。目前Safari和Chrome105已经支持。

强调！！！本文介绍的函数仍然属于实验中的属性，浏览器还不支持。但是相信不久就会支持。如果暂时不想了解学习，建议收藏，等浏览器支持了再来看！！！前言css中有将近102个函数，但是我们所掌握的大概又有多少呢？今天我们先来介绍其中的数学函数，数学函数大概有：基本算术：calc()比较函数：min()、max()和clamp()阶梯值函数：round()、mod()和rem()三角函数：sin()、cos()、tan()、asin()、acos()、atan()和atan2()指数函数

(https://juejin.cn/post/6987962113788493831 “https://juejin.cn/post/6987962113788493831”)读不在三更五鼓，功只怕一曝十寒。 看完觉得有收获的，点个赞呗！！！前言前有background-image 为背景增光增彩，后有mask-image 给背景增加可玩性，今天我们来聊聊border-image，看看他是如何发光发热的！Go!Go!Go!border-image首先这个属性是下面个属性的缩写，border

前言最近在公司听一个小姐姐做工作安排汇报的时候，发现这样一个效果，顿时感觉虎躯一震。在我的威逼利诱之下，小姐姐被迫说出这种文字效果是如何制作的，这不由的让我浮想联翩…下面就引出 CSS 的冷门标签:text-emphasis兼容性肉眼可见，兼容性不是太好，所以使用要慎重作用emphasis：强调顾名思义：用特殊的符号来对文本进行标记强调的。语法text-emphasis: text-emphasis-style ，text-emphasis-color；由此可以看出：text-e

前言不知道大家在开始学习CSS的时候，会不会经常遇到这样一道问题：如何实现一个三角形。类似这样的代码是不是很眼熟。嗯！看上去不是很复杂，但是代码是不是太多了！直到CSS3的出现，clip-path带来了新的更简单的实现方式。clip-path: polygon(50% 0%, 0% 100%, 100% 100%);兼容性看上去兼容性可能不太好，但是大部分的浏览器都部分支持这个属性。所以我觉得这个属性是可用的。语法内联/外部svgclip-path: url(#c1);首先我们在b

前言最近公司网站上线新的官网，上面飘着一个跑来跑去的小人，刚上线没多久，老板就提着到来砍我，“你要把这个小人累死吗？”，当时我就不乐意了。老板掏出了刀，我赶紧掏出了MDN，嘿，您猜怎么着，还真让我找到了， animation-play-state,这属性那叫一个管用哦。当然暂停动画不止这一种方案，其他的方案我们也会在本文讨论。JavaScript 暂停动画在 JavaScript 中，该属性是animationPlayState。使用语法element.style.animationPla

经过一晚上的努力，我写下了这篇文章，总结了我这几年在CSS开发中的想法。CSS的全称是Cascading Style Sheets，这意味这CSS是级联的样式表。你可以通过看看这个关于 CSS 级联的精彩网站（有测验！）来了解更多的技巧。现在大量的通过游戏来学习CSS的网站已经开始火爆，flex布局： https://flexboxfroggy.com/Grid布局： https://cssgridgarden.com/ andCSS选择器：https://flukeout.github

前言不知道有没有知道上面这个网站代表的意义！1990年12月20日，Berners-Lee上线了世界上第一个网站：http://info.cern.ch/包含该网站诞生的信息和轶事。这就是万维网的诞生，Tim Berners-Lee则被视为它的缔造者。第一眼看过去，我们看到的是啥？没错，是文字。text-align定义用于对齐块级元素的内部内容，这里用了内容而不是文本,text-align属性看名字就知道肯定会影响文本的对齐方式，同时它也对内联元素/内联块级元素/块级元素产生影响内联di

前言在登录twitter的时候发现他的输入框的placeholder是可以浮动的。当输入框获取到焦点的时候，placeholder 会跑到上面去。我觉得这样的登录方式的好处是：可以减少一个label，同时往上浮动又可以保证用户在输入的时候知道输入什么内容。pointer-eventspointer-events属性设置 HTML 元素如何响应鼠标/触摸事件/单击/点击事件以及光标是否可见。虽然pointer-events属性有11 个可能的值，但其中8个值都用于 SVG。任何 HTMl 元素的三个

创作不易 拒绝白嫖 点个赞呗关注专栏 学透CSS,带你走进CSS的深处！！！前言学以致用 [xué yǐ zhì yòng]学以致用，汉语成语，拼音是xué yǐ zhì yòng，意思是为了实际应用而学习。出自《为有源头活水来》。学习一门编程语言，不仅仅是学习他的语法，而是要将它应用到具体的场景中去。只有这样才能更好的从入门到精通。对于CSS来说，由于CSS的特殊性，导致它的学习不能局限于眼观，而是要放到真是的DOM中才能更好的体会具体属性的具体价值。在之前的文章box-shadow.

创作不易 拒绝白嫖 点个赞呗关注专栏 学透CSS,带你走进CSS的深处！！！前言网页的设置在很多时候并不是正好满足一页，拿我们经常用的掘金来说，因为使用了数据的分页加载，如果你想看更多的文章的话，需要不停的往下滑动，在浏览器的右边会一直存在着一个滚动条，这就是这篇文章想要了解的元素。在网页中当一页无法容纳所有的数据的时候，我们经常使用overflow来进行设定。overflowoverflow 是overflow-x 和overflow-y的简写，用来设定当一块级元素（通常设置了height/.

theme: channing-cyan这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战创作不易，点个赞再看呗!关注专栏 - 学透CSS，让你走进CSS世界的深处前言日常开发的时候，大家有么有遇到下面这种情况：设置一个盒子，但是我们不知道有没有内容，并且有多少内容我们也不能确定，而且又不想出现滚动条，这个时候我们就不能设置具体高度，但是我们可以设置min-height来用最小的高度撑开盒子，并且随着内容的多少，盒子的高度可以动态调整，这样是不是就满足了我们的要求。min/ma.

创作不易 拒绝白嫖 点个赞呗关注专栏 学透CSS,带你走进CSS的深处！！！前言新人在入门CSS的时候，往往最困惑的就是两件事情（个人想法）：1. CSS是基于文档流的，有些时候编写的代码，并不符合自己的预期！2.复杂的选择器，什么场景用什么选择器，选择器太长，让新人很困恼，。最近在公司的代码中发现了这样一段代码。.home .col .card a i.i1,.home .col .card a i.i2,.home .col .card a i.i3,.home .col .card.

创作不易 拒绝白嫖 点个赞呗关注专栏 学透CSS,带你走进CSS的深处！！！前言在正式学习:target 之前，我们先来学习一下网页开发中的锚点。下面是百度百科的介绍：古代的锚是一块大石头，或是装满石头的篓筐，称为”碇“。碇石用绳系住沉入水底，依其重量使船停泊。后来有木爪石锚，即在石块两旁系上木爪，靠重量和抓力使船停泊。中国南朝已有关于金属锚的记载。中国古代帆船使用四爪铁锚，这种锚性能优良，在舢板和小船上仍有使用。当你想乘船的时候，船在湖上飘着，无法登船，此时锚的作用就发挥出来了，只要.

创作不易 拒绝白嫖 点个赞呗关注专栏 学透CSS,带你走进CSS的深处！！！前言在上中两篇介绍文本属性的时候，我们基本已经学会了很多之前没有使用过的属性，今天我们接着来看更多的文本属性，CSS的世界是精妙的，无尽的，仅仅希望同这三篇文章，可以入得CSS的基础门。人生短暂，学无止尽。text-justify兼容性此属性目前被列为“有风险”在候选推荐期间被丢弃。因此，不建议在生产中使用此属性，因为它不太可能在不久的将来成为所有浏览器的标准。兼容性很差，目前也就火狐浏览器可以用！！！仅学习。定义

创作不易 拒绝白嫖 点个赞呗关注专栏 学透CSS,带你走进CSS的深处！！！前言上文我们介绍了，背景图片以及渐变，但是仅仅学会那点，只是背景图片的九牛一毛，本文要介绍的backdround-* 大家族，也是背景图片千变万化的基石。background-repeat ：如何平铺背景图片。语法单值语法background-repeat：属性值；repeat：在两个方向上平铺图像。这是默认值。background-image: url('./juejin.png');background-.

前言@support并属于比较新的CSS3属性了，几年前，@support刚出现的时候，大家其实对这个属性并没有啥感觉，因为那个时候CSS3在浏览器上的兼容性不是太好，并且有的浏览器也不兼容@support属性了，但是现在我觉得大家真的可以用起来了！@support允许我们在应用样式块之前，测试浏览器是否支持特定的属性：值组合；这个就有点类似@media，当浏览器的宽度介于每个区间，匹配的CSS生效。比如@media当浏览器窗口的宽度小于某个指定大小时查询如何匹配然后里面的CSS生效。语法@sup

前言在日常工作中，我们需要编写大量的CSS代码，当然如果你的日常工作主要是后台管理之类的系统的话，那你可能CSS用的比较少，但是如果你做过官网，宣传等等内容的话，一般这些可能比较更需要CSS的功底！我相信很多人还在坚持使用Bootstrap的，看完这篇文章，来尝试新的CSS库吧！！！Animate.css地址 Animate.css是一个随时可用的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。Cirrus.CSS地址一个完全响应式和全面的 SCSS 框架

前言在前端性能优化的话题中，我们经常能够看见，图像延迟加载。<img href="image.webp" alt="Image description" loading="lazy">在延迟加载的情况下，只有用户向下滚动，知道出现在用户眼前，图片才开始加载。在面对大量图片的情况下，极大的提高了页面的加载速度。我们今天不讨论这种情况，讨论一些图片如何在点击的时候才开始加载。不带src属性使用对于img标签，浏览器通过是被src中的链接，来请求图片，进而将图片加载到画面中。所以我们可以将

前言文字应该是网页中最常见的元素了，俗话说的好，见字如见人。下面请欣赏两幅书法作品：我相信即使你不懂书法，也能看到出来哪副作品好吧！！！ 如果你非要说第一个比较好看，那我也只能表示:fontfont是缩写，可以设置所有字体属性。设置顺序：font-style font-variant font-weight font-size/line-height font-familyfont-style设置字体的样式参数normal 默认值。浏览器显示一个标准的字体样式。inherit 规

最简单的三角气泡实现思路：使用一个::before和::after，对两个设置边框，最后边框的效果就是三角形，一个三角形的边框颜色div一致，两一个则是白色，整好覆盖在上方。代码 .bubble-box { position: relative; border: 2px solid #409eff; border-radius: 5px; width: 200px; height: 50px;

前言不知道有多少人做过自己的博客，在生成文章目录的时候，有没有人是下图样式的：会在标题前面加上数字编号的，大部分的实现方案是什么呢？我一开始是在遍历的时候加上数字编号的，不过这样的JS代码很多。需要判断层级数很麻烦。直到我发现纯css的counter属性！计数器CSS的计数器通过在 content 上应用 counter() 或 counters()函数来显示计数的。其中计数器是由counter-reset和counter-increment 来进行操作的。counter-increment

前言今天，我们生活在手机的世界里。有如此多的手机，有如此多的屏幕，屏幕的尺寸从当年的2.4英寸到3.5英寸、4.0英寸、5.0英寸等等，到现在基本上6.0英寸起步了。em它是相对于父字体大小的。比如给元素设置font-size: 2em，这里的默认字体大小实际上是继承自父亲的大小，font-size: 2em表示当前元素字体大小是父亲的2倍。求下面em的px值body{ font-size: 2em;}p { font-size: 2em; width: 2em;}<

前言一个优秀的网站永远都不是冷冰冰的，情感化、人性化一直是现代化网站所追求的！情感化设计利用彩配色激发用户情感，或高兴，或温暖，或宁静祥和；利用简单易懂，自由流畅的交互设计，吸引用户点击或参与；以及利用暖心体贴的界面文本设计，打动用户等等。不知道有多少人关注过苹果的官方，大胆的颜色，惊人的动画，我觉得这就是具有情感的网站虽然我们不是设计师，但是作为一个好的前端开发，在网站开发的时候也是需要一点人性化的意识，下面这两个输入框，在边框 边距 边角都不相同，最终的效果也各不相同。不讨论具体的设计，单

前言大部分的编程语言，在语言出现的那一刻就支持变量。但是，CSS一开始就不支持原生变量。所以大家开始选择SCSS,LESS等兼容的 CSS 扩展语言。不过庆幸的是CSS目前也已经支持变量。定义变量在JS中变量可以这样生命：var variable;在CSS中，变量是以两个-开始的。div { --divWidth: 100px}变量作用域全局作用域 :root:root { --bk-color: red}局部作用域div { --divWidth: 100px}不同作用

前言某次浏览沸点的时候，无意间的打开控制台，偶遇了text-rendering。这个没有用过的新鲜属性，让我瞬间开心了起来，又可以水一篇文章了学会新的属性了。兼容性掘金都在用，我觉得行！text-renderingMDN定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox） 和 Webkit（Chrome、Safari） 内核的浏览器允许该属性在 Windows、Mac O

在敲打自己的个人博客时，在博客的详情页，对于不同的内容，我是想有不同的复制方式的。例如代码块我就想读者单击就可以复制，这样方便读者本地调试，而对于文字描述部分，希望可以不允许读者复制。作为一个坚定的能用CSS绝不上JS的极端份子，我最终找到了CSS3中的user-select。

从写下第一篇关于CSS变量的文章《CSS中的变量 》，我就爱上了使用这个小东西（呆在一家不需要考虑浏览器兼容性的公司真舒服啊），后来，我又去学习CSS的进阶知识，学会了如何给一个CSS变量，定义属性和默认值-《带有类型和默认值的CSS变量》。在项目中，我已经开始CSS变量，当然使用SCSS/LESS的项目除外。在日常的使用中，我总结了几个使用CSS变量的极佳场景，本文记录总结一下。

前言日常开发中，我们经常使用border来给元素增加一些美感，但是由于盒子模型的存在，border有时候会影响我们的判断，所以今天我们来介绍另一个属性来为元素增加一些美感。outlineoutlineCSS 中的属性在元素的外部绘制一条线。它类似于边界，除了：它总是围绕所有边，你不能指定特定的边它不是盒模型的一部分，因此不会影响元素或相邻元素的位置，也就是说outline outline不占据空间它并不总是矩形兼容性除了IE浏览器，其他浏览器兼容性还是不错的。语法outline:

前言css中有将近102个函数，但是我们所掌握的大概又有多少呢？今天我们先来介绍其中的数学函数，数学函数大概有：基本算术：calc()比较函数：min()、max()和clamp()阶梯值函数：round()、mod()和rem()三角函数：sin()、cos()、tan()、asin()、acos()、atan()和atan2()指数函数：pow()、sqrt()、hypot()、log()、exp()符号相关函数：abs() , sign()除了这些函数，还有常量是需要记住的：e