草庐IT

backGround

全部标签

2022-8-23 css

✏️CSS✒️css三大特性?层叠性一个标签可以有多个css样式浏览器处理冲突的能力,如果一个属性通过两个相同的选择器设置到这个元素上,会根据样式的层叠规则样式的层叠规则——按照样式的声明顺序来层叠的【就近原则】选择器必须是同一种样式不冲突不会层叠?继承性子标签会继承父标签的某些样式,比如文本颜色和字号?优先级权重继承的权重是0——最低行内样式的权重是100权重相同的——就近原则!important命令——无限大css权重公式——贡献值继承、*——0000标签选择器——0001类、伪类选择器——0010id选择器——0100行内样式——1000!important——无穷大width,heig

多行文本下的文字渐隐消失术

本文将探讨一下,在多行文本情形下的一些有意思的文字动效。多行文本,相对于单行文本,场景会复杂一些,但是在实际业务中,多行文本也是非常之多的,但是其效果处理比起单行文本会更困难。单行与多行文本的渐隐首先,我们来看这样一个例子,我们要实现这样一个单行文本的渐隐:使用mask,可以轻松实现这样的效果,只需要:Loremipsumdolorsitametconsectetur.p{mask:linear-gradient(90deg,#fff,transparent);}但是,如果,场景变成了多行呢?我们需要将多行文本最后一行,实现渐隐消失,并且适配不同的多行场景:这个就会稍微复杂一点点,但是也是有多

妙用 CSS 构建花式透视背景效果

本文将介绍一种巧用background配合backdrop-filter来构建有趣的透视背景效果的方式。本技巧源自于一名群友的提问,如何构建如ElementUI文档的一种顶栏背景特效,看看效果:仔细看,在页面的的滚动过程中,顶栏的背景不是白色的,也不是毛玻璃效果,而是能够将背景颗粒化:准确而言,是一种基于颗粒化的毛玻璃效果,元素首先是被颗粒化,其次,元素的边缘也是在一定程度上被虚化了。那么,我们该如何实现这个效果呢?需求拆解上述效果看似神奇,其实原理也非常简单。主要就是颗粒化的背景background加上backdrop-filter:blur()即可。首先,我们需要实现颗粒背景。我们利用ba

前端学习(2)

1.shift+alt+f格式化代码(vscode)2.css的复合选择器  后代选择器:选后代(不一定是儿子)  空格隔开如olli{样式声明}更好地选择想要的标签也可以用class表示如.nav.li.a  子选择器 >亲儿子  并集选择器  逗号div,p{样式声明}最后一个选择器不需要加逗号3.链接伪类选择器(鼠标放上去变色)  必须按照LVHA来写否则会无效化  用冒号表示  a:link把没有点过的链接变化text-decoration:none删除下划线  a:visited已经访问过的  a:hover指针指在上面更改背景颜色  a:active活动链接按住鼠标  给a修改样式

CSS元素水平垂直居中方式-最全

最全的CSS盒子(div)水平垂直居中布局,对CSS布局掌握程度决定你在Web开发中的开发页面速度。相对于屏幕方法一:利用定位body{background:green;}.box{position:fixed;top:50%;left:50%;margin:-150px00-150px;width:300px;height:300px;background:orange;}设置Position为fixed定位,top和left各设置50%,margin设置负的容器宽高的一半。方法二:利用transformbody{background:green;}.box{position:fixed;t

CSS元素水平垂直居中方式-最全

最全的CSS盒子(div)水平垂直居中布局,对CSS布局掌握程度决定你在Web开发中的开发页面速度。相对于屏幕方法一:利用定位body{background:green;}.box{position:fixed;top:50%;left:50%;margin:-150px00-150px;width:300px;height:300px;background:orange;}设置Position为fixed定位,top和left各设置50%,margin设置负的容器宽高的一半。方法二:利用transformbody{background:green;}.box{position:fixed;t

在线客服系统源码开发实战总结:渐变色效果的实际运用效果

css里面有个背景色渐变色的效果,我们能拿来做什么呢现在就演示下,我在开发此页面时所实际实现的样子 演示页面-唯一在线客服系统    实现代码很简单,效果还是很不错:background:linear-gradient(90deg,#EE884C0%,#FFBA8E100%); 首页里也有个渐变色的运用 唯一在线客服系统   实现代码:background-image:linear-gradient(toright,#0d6efd,#2aeb91);花哨的样式尽量是少用,但是要能用到点缀的地方,会极大的增加页面的丰富性。也会让页面显得更有设计感 线性渐变background-image:lin

在线客服系统源码开发实战总结:渐变色效果的实际运用效果

css里面有个背景色渐变色的效果,我们能拿来做什么呢现在就演示下,我在开发此页面时所实际实现的样子 演示页面-唯一在线客服系统    实现代码很简单,效果还是很不错:background:linear-gradient(90deg,#EE884C0%,#FFBA8E100%); 首页里也有个渐变色的运用 唯一在线客服系统   实现代码:background-image:linear-gradient(toright,#0d6efd,#2aeb91);花哨的样式尽量是少用,但是要能用到点缀的地方,会极大的增加页面的丰富性。也会让页面显得更有设计感 线性渐变background-image:lin

第二章 线程管控

第二章线程管控主要内容:启动线程,并通过几种方式为新线程指定运行代码等待线程完成和分离线程并运行唯一识别一个线程2.1线程的基本管控​ main函数其本声就是一个线程,在其中又可以启动别的线程和设置其对应的函数入口。2.1.1发起线程​ 不管线程要执行的任务是复杂还是简单,其最终都要落实到标准库的std::thread对象的创建,书中这一章作者提到了所谓的“C++最麻烦的解释”:将函数对象传递给std::thread对象时,传入的是临时对象,而不是具名对象时,编译器会将其解释为函数声明而不是定义对象,这一块书中其实没有给出具体的代码示例,只是给出了如下的一个声明:std::threadmy

第二章 线程管控

第二章线程管控主要内容:启动线程,并通过几种方式为新线程指定运行代码等待线程完成和分离线程并运行唯一识别一个线程2.1线程的基本管控​ main函数其本声就是一个线程,在其中又可以启动别的线程和设置其对应的函数入口。2.1.1发起线程​ 不管线程要执行的任务是复杂还是简单,其最终都要落实到标准库的std::thread对象的创建,书中这一章作者提到了所谓的“C++最麻烦的解释”:将函数对象传递给std::thread对象时,传入的是临时对象,而不是具名对象时,编译器会将其解释为函数声明而不是定义对象,这一块书中其实没有给出具体的代码示例,只是给出了如下的一个声明:std::threadmy