CSS - 教程之家

469浏览

0评论

使用CSS实现黑白格背景效果

需求介绍在页面上，有时会需要展示一些透明背景的图片，为了展示其透明的背景，通常会像PS一样，使用黑白相间的格子组成背景，从而告诉用户，这是一张透明的图片。效果预览实现原理1.利...

2022-05-30

123浏览

0评论

CSS文本阴影 text-shadow 悬停效果详解

目录text-shadow 没有文字阴影text-shadow 语法悬停效果#1悬停效果#2悬停效果#3悬停效果#4最后本文将专注于使用 CSS text-shadow 属性来实现有趣的鼠标悬停效果，但是实际上...

2022-05-28

144浏览

0评论

html中相对位置与绝对位置的具体使用

用户在浏览网站时经常会看到左侧有一种宣传栏，它不会随着鼠标滚动而不被用户看到，它会始终以页面的中心为参照物始终保持在左侧一个固定的位置，今天我们来做一下这个小例子，让我...

2022-05-14

177浏览

0评论

HTML页面中使两个div并排显示的实现

在HTML中实现两个div并排显示，方法如下：方法1：设置float浮动对需要并排显示的div设置样式：style="float:left;"<div style="float:left;">div1</div>方法2：设置div为行内样式对需...

2022-05-14

134浏览

0评论

左边固定宽右边自适应的6种方法

这是一道面试题，你有多少种办法呢？这里我们假设左边名为 left，宽度为 200 px，右边名为 right。即默认.left { width: 200px;}我的理解分四大类 flex 布局需...

2022-05-12

126浏览

0评论

flex布局中子项目尺寸不受flex-shrink限制的问题解决

预期是写一个如下所示的布局内容：即有一个固定高度的外部容器，顶部的header已知高度，在header占据了固定高度后，剩下的都分给body部分。因此采用flex布局，header设置flex-shrink...

2022-05-10

273浏览

0评论

css如何设置不可点击的实现方法

可以通过设置元素的pointer-events属性设置为none，来实现元素不可点击。此方法是通过设置元素的鼠标事件失效来实现元素不可点击。pointer-events: none;CSS pointer-events...

2022-05-10

102浏览

0评论

css原子化项目落地可行性分析和探究

目录一、背景二、什么是css原子化，又有什么用？1.含义分析2.方案选择三、开发体验可行性优点1.开发的效率和舒适2.灵活和可维护缺点1.仍存在的上手门槛2. 小程序使用windicss受...

2022-04-27

131浏览

0评论

css实现文字断裂效果的示例代码

clip-path属性创建一个只有元素的部分区域，可以显示的剪切区域。区域内的部分显示，区域外的隐藏。<h1 data-text="Text Crack"> <span>Text Crack</span></h1>使用元素的伪...

2022-04-20

125浏览

0评论

浅谈CSS中浮动float带来的高度塌陷问题及4种解决方案

一：高度塌陷问题在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起...

2022-04-16

154浏览

0评论

clear在css中的用法是什么

clear在css中的用法是什么css中clear的作用是清除元素的浮动效果。clear属性指定段落的左侧或右侧不允许浮动的元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 cl...

2022-04-16

194浏览

0评论

css3中vh是什么意思

1/100的视口宽度。在客户端，视口指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。指的就是Layout V...

2022-04-16

100浏览

0评论

css样式中flex属性的用法是什么

css样式中flex属性的用法是什么flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如...

2022-04-16

138浏览

0评论

css实现右上角飘带效果的完整代码

效果：完成代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0 auto; padding: 0; } .wrap { ...

2022-04-04

109浏览

0评论

关于CSS自定义属性与前端页面的主题切换问题

基于级联变量的CSS自定义属性，已经出来很多年了。
虽然有less、sass等预处理器大行其道，但是自定义属性也有它的特点和用处，诸如在js中读写、作用域设置等等，在处理UI主题切换等...

2022-04-04

200浏览

0评论

CSS实现渐变色边框(Gradient borders)的5种方法

给 border 设置渐变色是很常见的效果，实现这个效果有很多思路，今天把我所知道的方法罗列于此供大家参考。1. 使用border-imageCSS 提供了 border-image 属性用于给 border 绘...

2022-04-04

79浏览

0评论

css3定义渐变语法的是什么

css3定义渐变语法的是什么CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你...

2022-03-29

102浏览

0评论

css3怎么让字体不换行

css3怎么让字体不换行在css中，可以使用white-space属性来强制文字不换行；通常我们使用white-space:nowrap来强制文本文字内容不换行，文本会在在同一行上显示，直到遇到 <br> 标签...

2022-03-29

92浏览

0评论

css3只能实现一次动画吗

css3只能实现一次动画吗css3不是只能实现一次动画。利用animation-iteration-count即可。animation-iteration-count属性定义动画应该播放多少次。默认值为一。语法animatio...

2022-03-29

130浏览

0评论

css3有判断语句吗

css3有判断语句吗css3中有判断语句。@supports是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式，即css的特性检测。CSS特性检测就是针对不同...

2022-03-29

99浏览

0评论

css3怎么去掉input点击的框

css3怎么去掉input点击的框1、可以先利用:focus选择器选中input元素:focus选择器用于选择具有焦点的元素。:focus选择器接受键盘事件或其他用户输入的元素。2、再利用outlin...

2022-03-29

108浏览

0评论

css3怎么实现动画结束不消失效果

css3怎么实现动画结束不消失效果animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。默认情况下，CSS 动画在第一个...

2022-03-29

84浏览

0评论

CSS3中的渐变分为哪几类

CSS3中的渐变分为哪几类CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向径向渐变（R...

2022-03-29

101浏览

0评论

怎么用CSS3实现对图片的放大效果

怎么用CSS3实现对图片的放大效果方法一，利用transform属性配合scale()方法transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。scal...

2022-03-29

96浏览

0评论

css3支持rgba吗

css3支持rgba吗rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。支持版本：CSS3RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。C...

2022-03-29

97浏览

0评论

神奇的CSS，实现自动补全字符串！

很多时候都会碰到字符串补全的需求，典型的例子就时间或者日期中的补零操作，例如2021-12-312022-03-03通常的做法是if (num < 10) { num = '0' + num}后来，JS 中出现了...

2022-03-24

114浏览

0评论

使用CSS连接数据库的方式

故事背景某公司招聘需求如下:我们正在寻求可以使用CSS连接数据库的前端伙伴~自从我上次开始一个高质量的“发帖”以来，已经有很长一段时间了，事实上，它已经很长一...

2022-03-20

103浏览

0评论

css3新特性的应用示例分析

css3 盒子模型css3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box 、border-box ，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：box - siz...

2022-03-20

99浏览

0评论

css布局技巧css三角示例的巧妙运用

目录css三角强化案例结语css三角强化上期的css三角是等腰的，有是我们需要像下面这中的直角，该怎么做呢？接下来我一步步教你做：在上期做法基础上做改动就行只需要把上期这个盒子...

2022-03-20

73浏览

0评论

css3新增选择器的应用示例

目录属性选择器示例结构伪类选择器示例伪元素选择器示例结语CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素，你还不知道吗？属性选择器属性选择器可以根据元素特定...

2022-03-20

162浏览

0评论

CSS3实现指纹特效代码

具体代码如下所示：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing:...

2022-03-20

94浏览

0评论

CSS精灵图的原理与使用方法介绍

目录I.精灵图介绍II.精灵图的实现方式：拼出你的名字III.软件辅助定位I.精灵图介绍首先，我们先介绍一下什么是精灵图：先强调一点哈，精灵图和下面这个玩意儿没啥关系：它的名字是这...

2022-03-20

110浏览

0评论

css实现左上角飘带效果的完整代码

css实现左上角飘带效果效果如下：html代码<div class='wrap'> <div class='ribbon'> <span>测试1</span> </div></div>css代码.wrap { /* 最外层的div容器 */...

2022-03-20

146浏览

0评论

看看图片马赛克风格化效果用CSS怎么实现？

一、image-rendering 介绍CSS 中有一个有趣的特性叫 image-rendering，它可以通过算法来更好地显示被缩放的图片。假设我们有一张尺寸较小的二维码截图（下方左，仅为示意图不可扫...

2022-02-28

132浏览

0评论

你必须了解Selenium使用CSS定位总结

大部分人在使用selenium定位元素时，用的是xpath定位，css定位往往被忽略掉了，其实css定位也有它的价值，css定位更快，语法更简洁一、CSS 选择器常见符号：
#表示 id选择器
.表示 clas...

2022-02-17

157浏览

0评论

快看！10个值得收藏的CSS实用小技巧

1.如何在CSS中修复网页上的水平滚动如果你在设置网页样式并且在底部看到水平滚动条，则需要找到宽度大于可用屏幕宽度的元素。例如，在下面的屏幕截图中，你可以看到有一个水平滚...

2022-02-17

187浏览

0评论

鲜为人知！用css做极光效果

使用 CSS 可以实现极光吗？像是这样：emmm，这有点难为人了。不过，最近我也尝试着去试了下，虽然不可能模拟出那么真实的效果，但是使用 CSS 还是可以作出类似的一些特效的，今天我们就一...

2022-02-09

176浏览

0评论

你了解 Transition 吗？一起来深入了解下Transition！

这篇文章我们深入学习 Transition 动画。没错，CSS3 Transition 动画。你可能会问，不是很简单吗，这什么好讲的？确实，Transition 动画使用起来非常容易。只需要给元素加上 transiti...

2022-02-09

153浏览

0评论

一起聊聊CSS浮动布局及文档流

文档流简介什么叫“文档流”？简单来说，就是指元素在页面中出现的先后顺序。可分为“正常文档流”和“脱离文档流”。1、正常文档流正常文档流，...

2022-02-07

251浏览

0评论

CSS实现九宫格布局(自适应)的示例代码

简介本文用示例介绍CSS进行九宫格布局的方法。朋友圈、微博等很多社交平台都是使用九宫格布局来展示图片的，九宫格布局也是前端面试经常会问的问题。...

2022-01-24

179浏览

0评论

css3怎样实现立体翻转效果

css3怎样实现立体翻转效果transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。当该属性与rotateX()、rotateY()、rotateZ()和rotat...

2022-01-24

142浏览

0评论

css3圆角属性的每个值代表什么

css3圆角属性的每个值代表什么CSS3 border-radius - 指定每个圆角，border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性如果你在 border-radius属性中...

2022-01-24

189浏览

0评论

css3中border-box是什么意思

css3中border-box是什么意思在css3中border-box是box-sizing属性的一个值。box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如，假如您需要并排放置两个带...

2022-01-24

164浏览

0评论

css3怎样设置一行显示多少个字符

css3怎样设置一行显示多少个字符overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会...

2022-01-24

146浏览

0评论

css3怎样用rotate设置旋转角度

css3怎样用rotate设置旋转角度transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。该属性可以配合rotate()函数来设置旋转角度。ro...

2022-01-24

112浏览

0评论

css3设置动画匀速的属性单词是哪个

css3设置动画匀速的属性单词是哪个animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。...

2022-01-24

119浏览

0评论

值得收藏css预处理器scss的使用总结

1. 为什么会出现css预处理器–CSS不是一种编程语言，仅仅只能用来编写网站样式，在web初期时，网站的搭建还比较基础，所需要的样式往往也很简单。但是随着用户需求的增加以及...

2022-01-24

85浏览

0评论

一个实例用css来实现胖橘的喜乐（实例分享）

本期我们通过vite+scss去完成一个橘猫心情变化的创意动画，这里的逻辑我们将不使用任何js代码，仅依靠css来完成，所以，通过本期的动画，你可以到一些css动画和绘制的一些技巧。还比...

2022-01-22

124浏览

0评论

一文详解如何css实现动态弧形线条长短变化的Loading动画

有群友问我，使用 CSS 如何实现如下 Loading 效果：这是一个非常有意思的问题。我们知道，使用 CSS，我们可以非常轻松的实现这样一个动画效果：<div></div>div { width: 100px;...

2022-01-22

107浏览

0评论

将内联元素转换为块元素的css语句是什么

根据css显示分类，HTML元素被分为三种类型:块状元素，内联元素，内联块元素。在css中，只需要给内联元素设置display：block样式即可将其转换为块元素。display属性用于定义建立布局...

2022-01-20

热门文章