CSS
css 文字渐变
效果如图 代码如下： background: linear-gradient( to bottom, #ffffff 0%, #ffffff 45%, #389df5 100% ); background-clip: text; -webkit-background-clip: text; -web ......
css伪类和伪元素
一、伪类说明 定义：伪类⽤于向某些选择器添加特殊的效果 超链接（a标签）伪类：a标签我们在日常工作和学习中用的很多，我们只知道默认状态下为蓝色，但是a标签其实有四种状态。 1、未访问前为蓝色（如果a标签使用不是蓝色而是紫色，那么近期访问过该网站，需要去浏览器删除近期记录） a:link 2、鼠标按着 ......
css 字体一闪闪和有光泽一闪而过效果
<div class="card-remark">请把卡放入读卡器上...</div> 字体一闪闪效果： .card-remark { font-family: Arial, sans-serif; /* 选择字体 */ font-size: 36px; /* 设置字体大小 */ color: rg ......
记录--纯CSS实现骚气红丝带
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 在本文中，我们将探讨如何使用 CSS 以最少的代码创造出精美的 CSS 丝带形状,并最终实现下面这个效果： 下面我们使用html和css来实现这个效果。我们使用内容自适应方式布局，不用担心里面的文字长度。本文介绍两种丝带：左侧的丝带称为“ ......
CSS 多行文本超链接下划线动效
先看效果 乍一看，是不是感觉很简单，仔细一瞅发现事情好像没有那么简单。 如果十分钟还没想出怎么实现，那就把简历上的“精通css”改成“了解css”……😅 大部分人第一感觉都是想着用border-bottom去做，但是仔细看一下这个是多行文本，下划线始终在最后一行肯定是不合适的，而且下划线运动轨迹是 ......
为什么 CSS flex 布局中没有 `justify-items` 和 `justify-self`?
为什么 CSS flex 布局中没有 justify-items 和 justify-self？ 为什么在 CSS flex 布局中存在 align-items 和 align-self，却没有 justify-items 和 justify-self 呢？要解答这个问题，首先需要理解主轴（main ......
threejs CSS2DObject点击事件触发不了
原因：在three.js 0.13X版本后,上面dom的onclick 不会触发，原因是控制器Controls，可以尝试一下去掉控制器，看看dom上的点击事件是否ok let obtControls = new OrbitControls(camera, container); // OrbitCo ......
css_扩散动效
html <div id="modelContainer" class="init"> <div class="mask"></div> <div class="model_content"> <div class="attention_container"> <div class="dot"> < ......
css布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ......
css样式对单行和多行文本的隐藏
在我们日常的网页中，尤其是新闻类的网页会遇到许多类似于这样的样式 多行甚至单行的文本隐藏+上省略号标题。 解决这一办法，需要利用css的样式进行改变 如下代码的演示： 单行文本隐藏: 多行文本隐藏： 主要知识点： 1、单行文本隐藏省略：文本不能换行、超出部分隐藏、超出部分省略 2、多行文本隐藏省略： ......
每日一题：通过css变量来控制主题
1、定义不同主题颜色 :root{ --theme-color: blue; --font-size: 18px;; } html[theme="dark"]{ --theme-color: #000; 2、通过切换html自定义属性来控制主题 <!DOCTYPE html> <html lang= ......
CSS 将div撑满body
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style> html, body { height: 100%; margin: 0; overflow: hidden; } .co ......
Spring Boot 访问静态资源css/js
一、前言 我们用 Spring Boot 搭建 Web 应用时（如搭建一个博客），经常需要在 Html 中访问一些静态资源，比如： css 样式； js 脚本； favicon.ico 图标等； 而在 Spring Boot 中如果没有做任何配置，是无法直接访问静态资源的，通常会报 404 错误 二 ......
css的样式
一,css的文本样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl ......
CSS弹性盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ......
CSS盒子模型
对html 进行封装：包括外边距、边框、内边距和实际内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial ......
自定义滚动条 css
/* 自定义滚动条 css */ .customScrollbar::-webkit-scrollbar{width:10px;height:10px;} .customScrollbar::-webkit-scrollbar-thumb{border-radius: 8px;background- ......
css自定义滚动条
.container { width: 200px; height: 150px; overflow: auto; /* 自动显示滚动条 / -ms-overflow-style: scrollbar; / 在IE上显示自定义滚动条 */ } /* 自定义滚动条的样式 */ .container:: ......
在线直播源码，CSS磨砂玻璃效果和渐变主题色文字
在线直播源码，CSS磨砂玻璃效果和渐变主题色文字 HTML <div class="card"> <h2 class="gradient"> </h2> <div> <p>.welcome{</p> <p class="indent">"CSDN:lqj_本人"</p> <p class="inde ......
CSS常用总结
重置样式 html, body, ul, li, a, p, div { padding: 0; margin: 0; // 设置盒模型 box-sizing: border-box; // 移除移动端特有的点击高亮效果 -webkit-tap-highlight-color: transparen ......
CSS单位
CSS常用长度单位 px：相对长度单位 相对于显示器屏幕分辨率 rem：相对长度单位 对于根元素(即html元素)font-size计算值的倍数 html{ font-size:14px; 那么 14px=1rem 28px=2rem 即：n px=n/14 rem } h3{ font-size= ......
Vue学习笔记（七）：绑定css样式
1 绑定class样式¶ vue为HTML绑定css中的class样式是通过v-bind实现的。 1.1 绑定单个class¶ 把需要绑定的样式class名赋值给一遍变量，然后通过变量v-bind绑定class属性，绑定后的class并不会覆盖原来的class属性，而是与原来的class进行叠加。如 ......
CSS关系选择性
选择性的选择器有后代选择器、子代选择器、相邻选择器和通用兄弟选择器 1.后代选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w ......
css
目录 1. 介绍css 2. CSS语法 3. CSS注释 4. CSS中的颜色值 5. CSS长度单位 6. html引入CSS的三种方法 6.1 行内样式（内联样式） 6.2 内嵌样式 6.3 外部样式 7. 选择器 7.1 标签选择器 7.2 类选择器 7.3 ID选择器 7.4 通配所有元素 ......
css字体样式
1.font-style 设置字体样式 属性值： normal：指定⽂本字体样式为正常的字体 italic：指定⽂本字体样式为斜体。 2.文字字体 font-family 只能引用系统自带的字体样式，如果需要其他别的字体，需要从外部下载调用 引用外部字体 网站：https://font.chinaz ......
在 Less 中使用与 Less 内置函数同名的原生 CSS 函数
参考资料 calc() - CSS：层叠样式表 | MDN Getting started - Escaping | Less.js Using The CSS Function calc() Inside The LESS CSS Preprocessor 问题描述 在原生 CSS 中有以下的函数 ......
css中的字体样式
一.字体的样式 font-style:"normal" 正常 font-style:"italic"斜体 二.字体的粗细 font-weight:"bold/bolder"; bold是粗体 font-weight:400; 400, 500为正常 500<为粗体 >400为细体 三.字体的家庭 f ......
css的认知与样式
# 1.介绍 ## 目录 - [1. 介绍](#1-介绍) - [2. CSS语法](#2-CSS语法) - [3. CSS注释](#3-CSS注释) - [4. CSS中的颜色值](#4-CSS中的颜色值) - [5. CSS长度单位](#5-CSS长度单位) - [6. html引入CSS的三种 ......
CSS，position: relative用法
展示图如下： 使左边区域固定展示，不受子域名的影响，所以要使用相对定位position: relative 相对定位一般使用父级菜单 绝对定位使用如下： 绝对定位一般使用子级菜单 position: absolute 悬浮遮盖其余位置 ......