CSS - 教程之家

127浏览

0评论

css3实现二维码扫描特效的示例

在线预览

https://jsrun.pro/AafKp/

先看效果：

第一步，实现网格背景：

background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77...

2020-11-01

73浏览

0评论

伪类和伪元素的使用方法介绍

css伪类和伪元素line-height （行高官方定义：两行文字基线对齐）目标伪类:link （a:link 未访问的链接浏览器有缓存！！所以刷新没用） a:active{color: ;}:active （长按住）:visit...

2020-11-01

103浏览

0评论

css的display属性有哪些

css的display属性有：1、display: none：把元素隐藏，物理位置也不在了.2、鼠标移动到c1，c2区域的时候隐藏c1.3、display: inline：把块级标签变成内联标签.4、display: block：把内联...

2020-10-28

99浏览

0评论

CSS如何实现自适应分隔线？方法介绍

CSS如何实现自适应分隔线？下面就来给大家介绍一下CSS实现自适应分隔线的N种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。分割线是网页中比较常见的...

2020-10-28

100浏览

0评论

详解CSS中的Media媒体查询

一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体...

2020-10-28

67浏览

0评论

26个常用易忘CSS小技巧

收集于平时常用但易忘的CSS实现方法，如有遗漏或补充，还请指正！解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移.wrap { display: inline-block; overf...

2020-10-28

100浏览

0评论

深入学习CSS中如何使用定位(小结)

CSS中定位介绍position 属性在英文单词中表示位置的意思，在 CSS 中主要作用设置元素的定位。CSS 中一共有 3 种定位如下：属性值描...

2020-10-28

62浏览

0评论

CSS像素以及移动端不同屏幕适配问题解决

像素分辨率我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示原理与CRT不同，只有在桌面分辨率与...

2020-10-28

109浏览

0评论

如何使用css3实现一个类在线直播的队列动画的示例代码

之前在群里有个朋友问了这样一个问题, 就是如何在小程序中实现类似直播平台的用户上线时的队列动画 ? 作为一名前端工程师, 解决方案无非以下2种: 使用 javascript...

2020-10-28

112浏览

0评论

CSS Viewport 单位实现快速布局

**CSS Viewport units(视口单位)**在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态...

2020-10-28

87浏览

0评论

CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码

transform:scale()可以实现按比例放大或者缩小功能。
transition可以设置动画执行的时间，实现缓慢或者快速的执行动画，效果图如下：源码：<!DOCTYPE html><html> <head> <meta ch...

2020-10-28

86浏览

0评论

在CSS网格布局中的列中填充项目的实现方法

假设我们有n 个项目，并且我们必须在网格布局中将这些项目按列排序。列数是固定的，我们还必须确保网格布局中的行数最少，以便有效填充网格。在本文中，我把数字视为项目。并且根据...

2020-10-28

757浏览

0评论

css实现div背景色闪烁效果

我们先来看下效果图：代码实现：<!DOCTYPE html><html><head><style>@keyframes fade { from { opacity: 1.0; } 50% { opacity: 0.0; } to {...

2020-10-27

106浏览

0评论

css text-align-last属性怎么用

text-align-last属性定义及用法在css中，text-align-last属性是使用来规定如何对齐文本的最后一行，使用该属性必须将text-align属性设置为"justify"，不然text-align-last属性不...

2020-10-24

108浏览

0评论

css设置背景图片模糊，内容不模糊

需求：一个p设置了background: url，现在需要使图片背景模糊，p内的文字清晰显示。原始代码：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style type="...

2020-10-24

136浏览

0评论

css样式重置

对CSS重置的个人理解：首先，我觉得像我一样对于理解概念无感，容易混淆的前端小白要清楚什么是css重置样式，就要弄清楚两个概念：CSS Reset以及css重置（其实概念很相近，但是还是有所区...

2020-10-23

96浏览

0评论

如何利用css改变input光标颜色

具体方法如下：1、使用color来实现光标的颜色是继承自当前输入框字体的颜色，所以用color属性即可改变：input{ color:red;}2、使用caret-color来实现上一种方式已经修改了光标...

2020-10-22

159浏览

0评论

css如何控制元素的显示与隐藏

属性介绍：1. display属性display属性用于设置一个元素应如何显示。display: none; 隐藏对象display: block; 除了转换为块级元素之外，同时还有显示元素的意思display隐藏元素...

2020-10-20

112浏览

0评论

了解一些提高前端开发效率的 CSS 属性选择器

属性选择器非常神奇。它们可以使你摆脱棘手的问题，帮助你避免添加类，并指出代码中的一些问题。但是不要担心，虽然属性选择器非常复杂和强大，但是它们很容易学习和使用。在本文中...

2020-10-20

117浏览

0评论

三分钟了解css中z-index属性

css中z-index属性在做项目时，常常会用到弹出一个层，然后在这个层上进行操作，操作完成时就关闭弹出层，或者点击别的地方进行关闭层。通常都会在p样式中设置z-index的值，比如父层设...

2020-10-17

182浏览

0评论

css实现元素垂直居中显示的7种方式

【一】知道居中元素的宽高absolute + 负margin代码实现.wrapBox5{ width: 300px; height: 300px; border:1px solid red; position: relative;}.wrapItem5{...

2020-10-16

163浏览

0评论

css下div下同行多元素右对齐

方法一：float:right
此外，浮动还会使得布局更紧凑（没空隙）<div style="background-color: red;width: 100%;height: 60px;/* text-align: right; */"> <div style="width: 30px;...

2020-10-16

182浏览

0评论

浅谈css当中:focus-within的好玩之处

相信有些人看到过这个B站输入密码就遮眼睛的这个图这里我们用:focus-within玩一把布局是这样的外面有一个ctn 可以忽略，就是一个居中固定位置而已xPassword在没点击之前里面...

2020-10-16

168浏览

0评论

HTML+CSS+JS实现堆叠轮播效果的示例代码

效果：
轮播图在向一个方向移动的同时，要对其每一个图片的大小，位置，透明度以及层级进行改变
原理：
轮播图向左移动时将第一个子元素剪切到末尾，轮播图向右移动时，将末尾子元素剪切...

2020-10-16

168浏览

0评论

浅谈css动画是否会被js阻塞

css的动画部分是会被js阻塞的，不过transform的动画则不会受影响。下面举一个margin-left移动的动画下，启动js阻塞动画的性能图表<style>.walkabout-old-school { animation:...

2020-10-16

325浏览

0评论

详解CSS-opacity子元素继承父元素透明度的解决方法

在写项目页面的过程中，遇到子元素继承父元素透明度的问题，查找了好多文档给出的都是第一种方法，这种方法主要解决简单场景的，而对于设置复杂的background时，该方法不再适用。分析...

2020-10-16

606浏览

0评论

css选中父元素下的第一个子元素(:first-child)

前言最近在项目中用到 :first-child 很容易的就想到了，嗯嗯。这不就是选择第一个元素吗？好像很好用，平时使用中也没有遇到什么问题，理所当然的就以为它只会选中父元素下的第一个...

2020-10-16

127浏览

0评论

详解如何使用CSS选择所有子元素

如何使用CSS递归选择所有子元素？下面本篇文章就来给大家介绍一下使用CSS递归选择所有子元素的方法，希望对大家有所帮助。当元素是某个元素的子元素时，可以使用子选择器匹配，该选...

2020-10-16

128浏览

0评论

css等比例分割父级容器（完美三等分）的实现

父级容器的宽度一定，要实现子元素等比例完美均分父级宽度，实现方式有哪些？html部分代码：方法一：浮动布局+百分比（将子元素依次左浮动，根据子元素的个数，设定每个子元素的宽度百分...

2020-10-16

152浏览

0评论

CSS实现半透明边框与多重边框的场景分析

场景一：实现半透明边框：由于CSS样式的默认行为，背景色的渲染范围是 content+padding+border。半透明边框被主调色影响, 实现的效果为解决方案：使用background-clip 属性规定背景...

2020-10-16

92浏览

0评论

CSS拾遗之箭头,目录,图标的实现代码

1. CSS拾遗之图标图标有三种制作方法：图片 css(小箭头用CSS搞定) 自己画font(fontawsome插件)fontawsome插件下载之后，解压，新版的与老版不一样。2. html文件的目录...

2020-10-16

187浏览

0评论

基于html+css做一个好看的可翻转登录注册界面

做一个好看的可翻转登录注册界面前言
最近在尝试做网盘，使用的技术栈大概是 .net core + MVC + Mysql + Layui，主要目的是通过这个具体的项目，熟悉熟悉 .net core 开发，.net 的...

2020-10-16

85浏览

0评论

CSS动态渐变色边框围绕内容区域旋转的效果(实例代码)

效果图&emsp;&emsp;在网上查阅相关资料后，发现目前的动态渐变色边框的实现方式大部分为使用伪元素比内容区域大一圈然后横向移动渐变色背景的方式实现，而没有渐变色边框围绕内...

2020-10-16

141浏览

0评论

CSS实现鼠标移至图片上显示遮罩层效果

1、将遮罩层html代码与图片放在一个div我是放在 .img_div里。<div class="img_div"> <img src="./images/paella-dish.jpg"> <a href="#"> <div clas...

2020-10-16

99浏览

0评论

CSS3实现酷炫的3D旋转透视效果

CSS3实现酷炫的3D旋转透视3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视...

2020-10-16

84浏览

0评论

webpack加载css文件及其配置方法

webpack加载css文件及其配置当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去，但是如果我们的css文件有很多的...

2020-10-16

319浏览

0评论

CSS 使用radial-gradient 实现优惠券样式

本文将介绍如何使用 css 中的 radial-gradient 实现如下图所示的优惠券样式效果：绘制基本样式首先，我们绘制出优惠券的基本样式，这很简单，就不多说了。<div class="voucher">...

2020-10-16

59浏览

0评论

CSS如何设置列表样式属性(看这篇文章就够用了)

列表样式属性在 HTML 中有 2 种列表、无序列表和有序列表，在工作中无序列表比较常用，无序列表就是 ul 标签和 li 标签组合成的称之为无序列表，那什么是有序列表呢？就是 ol...

2020-10-16

126浏览

0评论

使用CSS的border-radius属性设置圆弧

现象：将div变为有一定幅度的圆形、椭圆形等方法：使用css的border-radius 属性进行设置CSS3 border-radius 属性：向 div 元素添加圆角边框：一：首先建立一个div二：给div设置圆角边框...

2020-10-16

99浏览

0评论

CSS边框长度控制功能的实现

以前需要边框长度比容器小一些时，我用div嵌套。后来发现伪类在实现这个效果时很方便，只需要一个div就够了，另外调整padding和margin都不会很麻烦。<div class="content-block">...

2020-10-16

1758浏览

0评论

详解如何修改el-select的样式：popper-append-to-body和popper-class

如何修改elementUI提供的el-select组件的样式网上有很多关于这个的解决方式：1、找到下拉框的类名，写个全局样式覆盖掉就行了
2、修改.el-select-dropdown__item的样式
3、通过...

2020-10-16

159浏览

0评论

css3动画小球滚动 js控制动画暂停

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。CSS3 @keyframes 规则要创建 CSS3 动画，你需要了解 @keyframes 规则。@keyframes 规则...

2020-10-16

443浏览

0评论

postcss-pxtorem移动端适配的实现

执行命令安装插件postcss-pxtorem npm install postcss-pxtorem -Dpostcss.config.js 新建package.json同一个目录下，文件内容如下module.exports = { plugins: { 'auto...

2020-10-16

215浏览

0评论

纯CSS实现数字加减按钮的最佳方案

前言：对于数字加减按钮的实现，以前用过不少方案，诸如：1.使用背景图片——这种效果比较好，缺点是样式控制有点复杂了，还需要使用图片；2.直接使用“+”“-&...

2020-10-16

149浏览

0评论

CSS flex-basis 文本溢出问题的解决

不值一提的 flex-basis ，却给文本溢出添加省略号这个小小的功能带来很多了麻烦。下面来演示一下。1. flex 家族flex 里有很多的属性，我们经常用到的就是如下操作：.container {...

2020-10-16

129浏览

0评论

CSS实现元素浮动和清除浮动的方法

浮动基本介绍在标准文档流中元素分为2种，块级元素和行内元素，如果想让一些元素既要有块级元素的特点也同时保留行内元素特点，只能让这些元素脱离标准文档流即可。浮动...

2020-10-16

133浏览

0评论

深度理解CSS clear:both的使用

clear:both用来清除浮动这是一直来的印象，但是自己很少会用这个，理解其实也不太正确，今天查查了资料，记录一下float的脱离文档流float的原始作用是为了实现文字环绕的作用，可以理...

2020-10-16

55浏览

0评论

better-scroll实现菜单和内容联动的效果

1、基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...

2020-10-16

179浏览

0评论

详解css中inline-block的最小宽度值

前言
最近晚上会抽出一点时间看《css世界》这本书，这本书讲的很有趣，让我知道css并非几个属性样式这么简单。昨天看到width在行内块元素中，如果设置其宽度为0，该元素标签里面的...

2020-10-16

77浏览

0评论

不可思议的CSS导航栏下划线跟随效果

国服第一切图仔 github.com/chokcoco 先上张图，如何使用纯 CSS 制作如下效果？在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧...

2020-10-16

热门文章