不常用的css样式

通常在引入第三方 UI 组件库（如 element-ui或者easyUI等等），需要自定义组件样式时，但由于样式使用了 scoped 属性（为避免组件之间的样式相互影响），导致无法直接覆盖原组件的样式，这时就需要用到样式穿透。该方法对所有样式语法通用，即适用于 css、stylus、sass、scss 和 less。该方法适用的样式语法：sass、scss、less。该方法适用的样式语法：css、stylus。

1、 什么情况下使用样式穿透 引入第三方组件库（如element-ui、element-plus），修改第三方组件库的样式 样式文件中使用了 scoped 属性，但是为了确保每个组件之间不存在相互影响所以不能去除 2、 样式穿透的三种办法 1. >>> 适用与 css、stylus，不太推荐，可能会有问题 外层类 /deep/ 想要修改类名 { 修改样式 } 2. /deep/ 适用于 scss、less 外层类 >>> 想要修改类名 { 修改样式 } 3. ::

CSS样式穿透通常在使用组件库或第三方组件时遇到，由于组件库封装了组件的样式，难以直接修改组件内部的样式。都是Vue特定的选择器，如果项目使用了CSS预处理器（如Sass、Less等），需要在选择器前面加上。是它的现代替代方案。在使用它们时，可以通过选择器深入到组件的子组件中，并覆盖它们的样式。伪选择器（Vue 2.6.0+）：为了替代过时的。是一种过时的样式穿透选择器，而。选择器，Vue引入了。

css 功能

css常用样式和不常用样式

display:none;//隐藏元素 visibility:hidden;//隐藏元素内容 display: flex;//flex布局 flex-direction: row;//flex横向布局 align-items: center;//flex-item居中排布 display: flex;//flex默认布局(默认横向) box-sizing: border-box;//盒子模型，加上...

1，设置颜色渐变 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.67), rgba(255, 255, 255, 0));（从上到下的颜色渐变） background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.71));（...

table的cellpadding和cellpadding我们经常会用如下的方式来清除默认样式： <tablecellspacing="0"cellpadding="0"></table> 很多朋友会说表现在结构中，这样不符合标准，那如何将这个表现拿出来，有些朋友或许很迷惑。我们可以用table的border-collapse:collapse;属性来代替cel...

pointer-events: none 它的意思是：除了指示该元素不是鼠标事件的目标之外， 值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。 （此文来着MDN）。说白了，就是让标签不接受鼠标事件（含click，mousemove，mouseup之类的）。 就是让加上的元素鼠标摸不着它 clip-path: circle(50px at 50px 50px) 意味裁剪路径的意思，让我们可以很便捷的生成各种几何图形 circle 裁剪生成一个圆。 polygon 生成任意多边形

1.filter 滤镜属性 filter:blur(px) 给图像设置高斯模糊 filter: grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0 brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100...

用户在输入框中输入的值在20~40之间，则背景颜色变为蓝色；如果不在这个范围内，则背景颜色变为红色。5.背景图像与背景颜色的混合模式(background-blend-mode)

一、自定义滚动条 ::-webkit-scrollbar { width: 5px; } /*定义滚动条轨道*/ body::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, .7); } /*定义滑块*/ body::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0,

链接张鑫旭大神的 深入理解CSS mix-blend-mode滤色screen混合模式 https://www.zhangxinxu.com/wordpress/2019/05/css-mix-blend-mode-screen/ CSS混合模式mix-blend-mode/background-blend-mode简介 https://www.zhangxinxu.com/wordpress/2015/05/css3-mix-blend-mode-background-blend-mode/ ...

CSS #移动端设置字体 (function(doc,win){ var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function(){ var clientWi

border: 1px solid #3B80FA; box-sizing:border-box; /*一般用于百分比或者其他 必须要添加border等操作问题*/ 语法： box-sizing: content-box|border-box|inherit; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 border-b...

字体样式 font-variant 设置字体是否以小型大写字母显示。 p{ font-variant: small-caps; /* 让小写字母以小型大写字母显示。*/ } font 字体设置简写组合方式。格式如下：[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称； p{ font: bold italic 20...

在平常的代码工作中，有很多冷门不常用的css样式标签。有些偏门、冷门的标签一般都记不住，想起来的时候就又会去现找，很影响工作效率，现在，把这些标签都统一整理一下用的少但是超级实用的css样式。