CamilleZJ的博客

实现网站都变成灰色

CSS 自定义属性（变量）

chrome浏览器自动填充样式

1、display：none；DOM结构：浏览器不会渲染display属性为none的元素，不占据空间，意思就是页面上没有它的一席之地，你在开发者模式中选不中那个元素。 事件监听：无法进行DOM事件监听。 性能：动态改变此属性时会引起重排，性能较差。 继承：不会被子元素继承，因为子元素也不被渲染。 transtion过渡不支持display。2.、visibility：hidden；DOM结构：元素被隐藏了，浏览器会渲染visibility属性为hidden的元素，占据空间，意思就是页面上

           .circle-progress-con{position: relative;margin: 0 auto;text-align: center;line-height: calc(196px - 16px);background-color: rgba(0, 0, 0, 0.6);border: 16px solid rgba(112, 112, 112, 0.5)...

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及...

之前做app内嵌页时，按照机型做了齐刘海适配，到现在iPhone12发布后，发现ios 齐刘海机型很多，所以按照机型适配有点繁琐，统一修改如下。先看一下各个机型以及分辨率：https://www.theiphonewiki.com/wiki/Modelsios中的px转pt根据设备的ppi大概是3:1/2:1/1:1转换：4.7寸6、6s、7、8，状态栏高度为20pt，导航栏高度为44pt. 5.5寸的6p、6sp、7p、8p，状态栏高度为18pt，导航栏高度为44pt. 拥有刘海屏的X

一、css word-spacing属性设置字间距（单词的间距）word-spacing 属性增加或减少单词间的空白（即字间隔）；在这个属性中，“字” 定义为由空白符包围的一个字符串。也就是说该属性是以空格为基准进行调节间距的，如果多个字母被连在一起，则会被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。语法：word-spacing:值;normal：定义单词间的标准空间，默认值。 length：定义单词间的固定空

1、filterCSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。filter: <filter-function> [<filter-function>]* | none2、<filter-function>CSS数据类型代表可以改变输入图像外观的图形效果。它可以用于filter和backdrop-filter属性。语法blur()：模糊图像brightness()：让图像更明亮或更暗淡con...

clip-pathCSS属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。和canvas和svg的剪裁很像。取值<clip-source>：用<url>表示剪切元素的路径<basic-shape>：一种形状，其大小和位置由<几何盒>值定义。如果没有指定几何框，则边框将用作参考框<geometry-box>：如果同<basic-shape>一起声明，它将为基本形状提供相应的参考框盒。通过自定...

CSS属性mask允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。和svg的mask很像mask的简写会将mask-border设为初始值。使用mask的简写优于使用其他简写或者各自属性的设置来覆盖。这能保证mask-border也会重新设置为新的效果样式。初始值 as each of the properties of the shorthand: mask-image:none mask-mode:match-sour...

body { -webkit-touch-callout: none; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}font-smoothingfont-smoothing是非标准的css渲染规则，由于不同操作系统对字体渲染不同，不同浏览器也有自己对样式的一套解释规则，所以这个css样式至今也没有加入web标...

常见的flexible.js，如下一、flexible.js 的使用方式：github地址：https://github.com/amfe/lib-flexible官方文档地址：https://github.com/amfe/article/issues/17本文中有部分内容引至上面这个文档。(一)、引用方式1，引用cdn地址<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flex

最近在做愚人节的活动编写了一个导航组件，如下两个页面共用同一导航组件： 如上第一个导航按钮和最后一个图片资源只给一半 另一半是旋转实现的，最后一个不仅旋转了按钮还旋转了文字实际测试网页正常，手机android正常，到ios上第二个页面上的最后一个导航按钮：幸运奖池未选中状态消失，点击选中状态会出现： 虽然最后一个导航按钮均是应用了transform:ro...

如上小圆点给定相同的width和height，再设置border-radius: 50%在IOS上看着正常，在andriod手机上有的是圆点有的是矩形的，主要是width和height太小了，在用rem等换算成px出现小数点导致的解决：对于像素过小的可以直接用px而不用rem等单位头像设置border-radius: 50%，并添加border，在手机上border用0.5p...

使用line-height垂直居中时，发现在IOS上显示很正常，但是在安卓机上显示不居中偏上，大约会往上移2px左右，用户体验差。网上说需要字号大于 12px 才能够正常居中，且无小数点的整数，并且还要字号为偶数，即：字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。 使用rem的单位时造成（根元素如果动态改变时，根元素字体可能不是整数）。但现...

最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的资料，解决了这个问题，这里记录一下~屏幕是一个二维平面，然而HTML元素却是排列在三维坐标系中，x为水平位置，y为垂直位置，z为屏幕由内向外方向的位置，我们在看屏幕的时候是沿着z轴方向从外向内的；由此，元素...

如上点评所获星级效果展示，星级以半颗为增长的最小宽度。实现，如下雪碧图： 不同星级直接用background-position取到相应的图即可，上面星级可选大、中、小。另一种做法或若是星星不是按照半颗半颗增长，则可以用一张灰图和一张亮图叠加，灰图在下亮图在上，灰图width100%，之后通过改变亮图的width，从而实现如上效果。...