image
属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底
2024年10月18日
image
mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底
2024年10月18日
font-size属性,用来设置页面中字体的大小,是css中最常用的属性之一,也叫字号,我们总是在一个页面里面用到各种不同的字号。
它的值可以使用多种方式来指定,非常的灵活:
(注:这里会用到基础字号与最小字号的两个概念,具体含义我们接下来会用示意图进行解释)
2024年10月18日
1.使用CSS复位
CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法:
*,*::before,*::after { box-sizing: border-box;
2024年10月18日
grid-area CSS 属性是一种简写,它通过在一个声明中设置网格行开始、网格列开始、网格行结束和网格列结束的值来指定网格布局中网格项的位置和大小。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.grid-item:nth-child(2) {
grid-area: 2 / 4 / 4 / 6;
/* is equivalent to: */
grid-row-start: 2;
grid-column-start: 4;
grid-row-end: 4;
grid-column-end: 6;
}
2024年10月18日
作为Web开发人员,最常见的事情之一就是更改HTML元素的背景颜色。但是,如果您不了解如何使用CSS background-color属性,可能会产生混淆。在本文中,我们讨论以下几点
1.HTML元素的默认背景色值
2.如何更改div的背景颜色,这是非常常见的元素
3.该background-color属性会影响CSS盒子模型的哪些部分,以及
4.此属性可以采用的不同值。
2024年10月18日
在几秒钟内为您的网站添加黑暗模式/夜间模式
Darkmode.Js 是一款开源项目,只需要添加一段代码,就可以为网站添加夜晚模式/黑暗模式/夜间模式/护眼模式,让你的网站跟上 UI 界的潮流。
这个库使用css混合混合模式,以便为您的任何网站带来黑暗模式。只需复制粘贴片段,你就会得到一个小部件来打开和关闭暗模式。您也可以在没有小部件的情况下以编程方式使用它。这个插件是轻量级的,内置于VanillaJS中。默认情况下,它还使用localstorage,因此您的上一个设置将被记住!
2024年10月18日
4.4日清明节大家可以看到很多很多网站包括主页和内容也都已经变成了灰色,比如百度、掘金、思否、CSDN 等等。
思否
CSDN
大家可以看到全站的内容都变成灰色了,包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢?
有人会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色的了,按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了,而且万一某个控件忘记加灰色样式了岂不是太突兀了。
2024年10月18日
前言
“字节跳动”现今也是如日中天,旗下产品,除头条外,还有短视频平台“抖音”,人气也是非常高,据说拥有7亿用户。
今天我们就来研究研究抖音的logo,蹭蹭热度。
效果预览:
CSS3动画解析抖音 LOGO制作
主要用css3新增属性mix-blend-mode,混合模式