CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
一、什么是scoped 在vue文件中的style标签上，有一个特殊的属性：scoped。 当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。 二、scoped的原理 为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性，data-v-xxxx ...
CSS前端学习（online tuorials）
index.html<!DOCTYPE html> 憨憨憨憨憨程序员学的前端例子~ 憨憨憨憨憨程序员学的前端例子~ ...
解锁CSS定位奥秘，从迷茫到精通，让你的网页布局“稳如老狗”，引领前端新潮流！
在Web前端开发中，CSS定位是布局设计的基石之一，它决定了元素在页面上的确切位置。其中，相对定位（Relative Positioning）、绝对定位（Absolute Positioning）和固定定位（Fixed Positioning）是三种最基本的定位方式&#x...
解锁CSS神秘面纱：深度剖析类选择器，掌握前端设计的绝密武器！
什么是类选择器 类选择器是一种CSS选择器，用于选择拥有指定类别的HTML元素，并为其应用样式。与类型选择器不同，类选择器允许为元素添加多个类别，并通过这些类别来定义特定的样式。 类选择器的语法 类选择器的语法以.开头，后跟类名，如.classname。类名可以是任何有效的CSS标识符，通常使用有意义的名称来描述元素的特性或功能。 ...
探秘CSS类型选择器：解码前端设计的神秘密码！
什么是类型选择器 类型选择器是CSS中最简单的一种选择器，它通过指定HTML元素的标签名称来选择元素。 比如，p选择器用于选择所有段落元素（<p>），h1选择器用于选择所有一级标题（<h1>）。类型选择器使用最广泛，适用于大多数的HTML元素。 类型选择器的语法 类型选择器的语法非常简单，只需要指定HTML元素的标签名称即可。例如，要选择...
只会用插件可不行，这些前端动画技术同样值得收藏-CSS篇
前言 实现动画效果是前端提升用户体验的重要一环，从CSS动画到JS动画帧，每种技术都有其独特的优势和适用场景，本篇文章将与大家分享浏览器CSS的原生动画技术 在css中有两种动画形式，分别是Transition（过渡，元素从一种样式逐渐变成另一种样式）和Animation（动画，元素通过几个步骤定义样式改变） Transition transition属性用来定义...
如何在CSS中写变量？一文带你了解前端样式利器
引言 前端的变量写法大致可以分为三大类，分别是CSS-in-JS，CSS预处理器，和CSS原生变量。作为前端开发人员，我们应该了解并善用它们，以便实现更加灵活、可维护的样式。本篇文章将与大家分享一下原生CSS的变量写法 概念 CSS变量也叫自定义属性，在它出现之前，CSS中使用的值通常是硬编码的（静态编写），这导致了样式代码的重复和冗余，在管理和维护大型项目时存在一些困扰...
前端 CSS 经典：模拟 material 文本框
效果 思路 定义三个元素，文本框，下划线，占位文字。input 聚焦时通过 ~ 选中兄弟元素，利用 required 属性 + css 中的 valid 验证，判断 input 中是否有输入。写入过渡效果。...
前端 CSS 经典：保持元素宽高比
前言：在很多网站，不管页面宽度的变化，都需要里面的图片或者视频，宽高比不变。有两种实现方式。 1. aspect-ratio 属性 使用 aspect-ratio 属性可以直接定义元素的宽高比，但是有兼容性问题 <!DOCTYPE html> <htm...
前端 CSS 经典：文字描边
前言：文字描边有两种实现方式 1. text-shadow 设置 8 个方向的文字阴影，缺点是只有八个方向，文字转角处可能有锯齿状。不支持文字透明，设置 color: transparent，文字会成描边颜色。 ...
本页面内关键词为智能算法引擎基于机器学习所生成，如有任何问题，可在页面下方点击"联系我们"与我们沟通。
CSS更多前端相关
开发与运维
集结各类场景实战经验，助你开发运维畅行无忧
+关注