斜角 边框css
CSS必学：你需要知道的盒子模型的秘密
作者:WangMin 格言:努力做好自己喜欢的每一件事 作为前端开发来说，要掌握的CSS基础一定很多，那么CSS中盒子模型肯定是必考必问必掌握的前端知识点，因为它是CSS基础中非常重要的内容，接下来我们就一起来了解一下盒子模型吧！ 什么是盒子模型？ CSS 所有的HTML 标签元素在网页中都生成了一 ......
初步了解CSS
初步了解CSS 一、CSS介绍 CSS定义 css（Cascading Style Sheet）层叠样式表，它是用来美化页面的一种脚本语言。 CSS作用 美化界面，比如：设置标签文字大小，颜色，字体加粗等样式。 控制页面布局：比如：设置浮动，定位样式。 CSS基本语法 css是由两个主要部分构成：选 ......
css---等宽瀑布流布局制作
瀑布流布局效果如下图： 当前项目需求，如下图： 商品展示，需要按接口返回的顺序展示，依次从左至右，从上至下。 方案1：CSS3 column 属性(实现的布局顺序为先从上到下，再从左至右，所以这种方式仅适用于数据固定不变的情况，对于滚动加载更多等可动态添加数据的情况就并不适用了。) 关键思路： co ......
npm安装datav-vue3(一个大屏边框和装饰组件)后报错Failed to resolve entry for package "@dataview/datav-vue3". The package may have incorrect main/module/exports specified in its package.json.
原因:个人认为应该是npm上的版本比较低,因为弄好后装饰只能用到第8个,后面的都没有,查看package.json里它的版本为^0.0.0-test.1672506674342,也就是说还没有正式版,在官方的说明里也有体现 [目前还处于 Alpha 阶段，所有的 API 及 Props 都可能在后续 ......
css 跟随屏幕大小变动
在网页设计中，我们常常需要让元素随着屏幕大小的变化而自适应。这样可以让网页在不同尺寸的设备上显示得更加美观和合理。CSS提供了很多的技巧来实现这一目的。 第一种方法是使用百分比来设置元素的大小。比如，可以将容器宽度设置为100%，这样容器就会随着屏幕大小的变化而自适应。同时，也可以使用百分比来设置字 ......
复习css
复习css 样式 内联样式，行内样式，外部样式优先级 离HTML元素越近，优先级越高 内联样式离元素近：行内样式>内联样式>外部样式 外部样式离元素近：行内样式>外部样式>内敛样式 本质：浏览器从上到下解析过程中，后出现的样式会覆盖较早出现的样式 选择器 基本选择器 id > 类 > 标签 本质：定 ......
HTML+CSS面试题
1、内元素和块级元素的区别？ 行内元素：不会独立出现在一行，单独使用的时候后面不会有换行符的元素。eg：span, strong, img, a 等。这些元素，默认的高宽，总是其内容的高宽。并且，margin和padding值，只有左右有效。 块级元素：独立在一行的元素，他们后面会自动带有换行符。e ......
03前端开发【css结束】
伪元素选择器 '''通过css操作文本内容''' 1.修改首个字体样式 p:first-letter{ color: red; font-size:48px； } 2.在文本开头添加内容 p:before{ content: '哈哈'； color：bule； } 3.在文本结尾添加内容 p:aft ......
防御性CSS
什么是防御性CSS呢？ 我的理解是我们所写的网页的内容不完全是静态的，也是可以发生变化的，因此也就增加了CSS出现的问题。不管网页的内容是多是少，还是窗口尺寸是大还是小，页面里面的内容与布局是要能正常显示而不会被破坏。 Flexbox 折行 Flexbox 是 CSS 中经常使用的布局，在父元素中设 ......
css 背景样式 梯形/平行四边形
绘制这种不规则的背景图形，目前我的思路是使用伪元素 伪元素的优点在于不用添加新的元素 实现平行效果使用了css transform: skew(); 具体代码如下 { position: relative; padding-left: 12px; color: #2187FF; background ......
html5+css-06
HTML5（最常用） 新增标签 语义化 header：头部 nav：导航 article:内容 section:定义文档某个区域 aside：侧边栏 footer:尾部 主要针对搜索引擎 可多次使用 在IE9中需要转化为块级标签 视频 audio：音频(.mp3) video：视频（尽量使用.mp4 ......
CSS-05
精灵图 为了减少服务器接收和发送请求的的次数 background-position 一般情况下，向上向左均是负的 background: url(images/icons.png) no-repeat -1103px -333px; 字体图标 展示为图标，本质为文字 结构样式简单的使用字体图标，复 ......
CSS 实现鼠标悬浮边框线动画效果
一、transition CSS transition（过渡效果）详解 CSS 中提供了 5 个有关过渡的属性，如下所示： transition-property：设置元素中参与过渡的属性； transition-duration：设置元素过渡的持续时间； transition-timing-fun ......
利用 CSS 的 clip-path 属性快速画三角形、气泡框
clip-path 结合 polygon 函数，可以快速切出一个三角形、气泡框。 a. 三角形有三个顶点，因此 polygon 需要传三个参数，每个参数是顶点的 x 和 y 轴位置百分比： #triangle-1 { -webkit-clip-path: polygon(50% 0, 100% 10 ......
CSS命名技巧规则
CSS命名注意事项： 1.一律小写; 2.尽量用英文； 3.不加中杠和下划线；[有特殊情况除外] 4.尽量不缩写，除非一看就明白的单词。 CSS文件名命名: 主要的 master.css 模块 module.css 基本共用 base.css 布局，版面 layout.css 主题 themes.c ......
CSS水平垂直居中
使用flex布局 <div class="content"> <div class="box"> </div> </div> .content{ height: 100vh; display: flex; justify-content: center; align-items: center; } ......
使用CSS的cross-fade()实现基于url的网页背景图半透明显示
参考链接：https://www.zhangxinxu.com/wordpress/2020/07/css-cross-fade-background-image-opacity/ 引子 在开发过程中，碰到了一个比较特别的情况，就是使用url()背景图像，同时又希望background-image背 ......
css元素水平垂直居中
1、单行文字的处理 <html> <head> <style> /* 要点，设置行高和DIV的行高一行 */ #div{ background-color: antiquewhite; height: 100px; line-height: 100px; text-align: center; } ......
css 渐变与背景裁剪
1.css的渐变 线性渐变 /* 线性渐变 */ .one { width: 300px; height: 300px; background: linear-gradient(to right, rgb(244, 239, 239) 2%, rgb(0, 9, 0) 5%, rgb(244, 23 ......
[转]CSS单位em和rem
原文地址:em和rem - WananPr1st - 博客园 em和rem都是相对单位，由浏览器转换为像素值，具体取决于设计中的字体大小设置。1em或者1rem会被浏览器解析成从16px到160px或者其他任意值。 em和rem单位之间的区别是浏览器根据谁来转化成px值的。 1.em em是相对于被 ......
css多个元素一行排列的方法
1、弹性盒子模型（FlexBox），不考虑兼容性问题的情况下，建议新手直接使用这种模式，简单，最重要的是元素不会浮动，不会影响后面的元素的布局，比如下面代码中的我在底层这个div的显示没有任何影响。 <html> <head> <style> #tasklist{ background-color: ......
你也许不再需要使用 CSS Media Queries（媒体查询）了
你也许不再需要使用 CSS Media Queries（媒体查询）了 最近，CSS 引入了一项新功能：Container Queries。它可以替代 Media Queries 并实现 Media Queries 无法胜任的任务。 超越 Media Queries 的功能 让我们想象一个场景：在网页 ......
html+css3+anime.js实现线条来回滑动且渐隐动画
效果： 代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=devic ......
html+css3+anime.js实现文字故障动画
记录一个很酷的动画，效果如图： 是基于html+css3+anime.js实现的，看了眼代码，其实是默认文字的div中定位了几个相同的文字块，利用clip-path这个属性去裁剪展示其中的一部分，用于展示故障的效果，动画则是使用anime.js去循环改变X与Y轴的位置，同时调整绘制的颜色，demo代 ......
CSS-04
定位 将盒子定在一固定位置 组成 定位模式+边偏移 定位模式 static-静态定位(标准流)（相当于无定位） relative-相对 absolute-绝对（脱标） fixed-固定（脱标） 相对定位 相对位置 position: relative; top: 100px; 相对自己的位置移动 ......
css设置backgroud：url(),无效
react项目中，使用styled-components编写样式，给元素添加背景图不生效。 background直接设置十六进制颜色或者颜色的英文名称都是可行的，但是使用url无作用，那就是url问题了，于是我想换一种思路，能不能把图片import进来，放进url里，避免错误的路径呢，于是 哎嘿，好 ......
CSS 还原拉斯维加斯球数字动画
我的小册 《CSS 技术揭秘与实战通关》上线了，想了解更多有趣、进阶、系统化的 CSS 内容，可以猛击 - LINK。 最近大家刷抖音，是否有刷到拉斯维加斯的新地标 「Sphere」： 场馆内部的视觉效果非常惊人，其中一个效果让我虎躯一震： 我的第一想法就是，这个看起来用 CSS 也可以实现嘛？还有 ......
CSS:@keyframes和animation
一、@keyframes定义动画 通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% ......