CSS - 教程之家

223浏览

0评论

CSS动态条形加载条效果的示例代码

运用了css变量的知识，直接上代码及其我加的注释<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>展示一个css动态条形加载条</title> <style> /...

2020-10-15

185浏览

0评论

CSS3实现线性渐变用法示例代码详解

前言演示下太老版本浏览器的渐变实现了[IE9-];
IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样;.testDiv { width:400px; height:400px; border:1px solid #f00; /...

2020-10-15

152浏览

0评论

H5中取消a标签在点击时的背景颜色的方法

1、取消a标签在移动端点击时的蓝色a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select:...

2020-10-15

177浏览

0评论

CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)

简写属性是用于同时给多个属性赋值的属性。比如font是一个简写属性，可以用于设置多种字体属性。它指定了font-style、font-weight、font-size、font-height以及font-family。...

2020-10-15

183浏览

0评论

CSS心形加载的动画源码的实现

废话不多说上代码，代码很简答，研究一下就明白了，有不明白的可以问我。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/cs...

2020-10-15

155浏览

0评论

使用CSS3实现字体颜色渐变的实现

在使用Animation.css的时候发现它的官网字体会渐变，看了一下他的css很有趣 .site__title { color: #f35626; background-image: -webkit-linear-gradient(92deg, #f35...

2020-10-15

205浏览

0评论

css动画效果之animation的常用样式

animation动画定义一个动画：/*设置一个关键帧，定义动画每一步执行的动作*/@keyframes mybox{ 0%{transform: translate(0,0);} 25%{transform: transla...

2020-10-15

116浏览

0评论

使用css的filter写鼠标滑过效果的实现示例

使用css的filter写鼠标滑过效果<div class="filter-div"> <img class="filter-img" src="../assets/images/01list.png"/></div><style> .filter-div { width: 67p...

2020-10-15

358浏览

0评论

详解css-vars-ponyfill 在ie环境下使用问题（nextjs 构建）

css-vars-ponyfill通过css变量来实现网页换肤的过程中，会出现兼容性问题。为了解决ie，qq，百度浏览器等兼容性问题，引入css-vars-ponyfill，但是在ie浏览器下，css-vars-ponyfill 的...

2020-10-15

144浏览

0评论

CSS中使用text-align、margin：0 auto居中的示例代码

CSS中使用text-align、margin：0 auto居中在使用text-align或者是margin：0 auto进行居中时，可能会出现无效的情况，下面用两个例子来讲解和解决问题示例1：让内联元素居中使用text-a...

2020-10-15

170浏览

0评论

CSS line-height的如何继承的问题

Line-height的如何继承？写具体数值，如30px,则继承该值（比较好理解）写比例，如2/1.5,则继承该比例（比较好理解）比如body中line-height设为2，则p标签继承line-height为2,则算出...

2020-10-15

122浏览

0评论

浅谈CSS到底会不会阻塞页面渲染

可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我们就一起来分析一下。原理解析那么为什么会出现上面的现象呢？我们从浏览器的渲...

2020-10-15

185浏览

0评论

CSS实现鼠标悬停改变其他标签样式的示例代码

前言：
据我了解目前CSS只能控制悬停时改变该标签下面的兄弟标签和子标签样式，如有大佬有好的方法请指教！
控制其他标签（根据控制标签与被控制标签之间的关系）可分为三种...

2020-10-15

274浏览

0评论

解决line-height=height元素高度但是文字并没有垂直居中的问题

先说下为什么line-height等于元素高度文字却没有垂直居中，其实line-height等于元素高度的时候文本并不是真的居中了，而是看着居中了，当元素高度和font-size差距较大的时候，这种...

2020-10-15

256浏览

0评论

深入浅析CSS 的多种背景及使用场景和技巧

本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料CSS background是最常用的CSS属性之一。然而，并不是所有开发人...

2020-10-15

230浏览

0评论

详解中文字体在CSS样式中font-family对应的英文名称

宋体：SimSun
黑体：SimHei
微软雅黑：Microsoft YaHei
微软正黑体：Microsoft JhengHei
新宋体：NSimSun
新细明体：PMingLiU
细明体：MingLiU
标楷体：DFKai-SB
仿宋：FangSong
楷体：KaiTi
仿...

2020-10-15

199浏览

0评论

纯CSS实现图片百叶窗展示效果示例

首先给大家看一下完成效果主要思路：其实这个百叶窗还是利用了一种障眼法，我们看上去是鼠标移动上去之后，图片展开了，其实这些图片在原地根本没有动，只不过是我们把这些图片放在了...

2020-10-15

135浏览

0评论

css 命名：BEM, scoped css, css modules 与 css-in-js详解

css 作用域是全局的，项目越来越大，人越来越多，命名慢慢成为问题，以下是几种解决命名问题的方案一. BEM以 .block__element--modifier 形式命名，命名有含义，block 可视为模块，有一定...

2020-10-15

174浏览

0评论

CSS八种让人眼前一亮的HOVER效果的示例代码

一.发送效果HTML<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>CSS#send-btn{ display: flex; align-items: center; justify-cont...

2020-10-15

334浏览

0评论

css3实现动画的三种方式

这是一个考验面试者对css的基础知识。css 实现动画主要有3种方式第一种是： transition 实现渐变动画第二种是： transform 转变动画第三种是： animation 实现自定义动画下面具体...

2020-10-15

224浏览

0评论

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？一...

2020-10-15

256浏览

0评论

完美解决谷歌浏览器自动填充问题

在谷歌浏览器中，登陆成功后，谷歌浏览器会提示是否记住密码。如果选择记住密码，那么再次登录会出现诸如下边情况：如果产品需求是不希望浏览器自动填充账号密码，那么怎么去除呢？最先...

2020-10-15

188浏览

0评论

看完不迷糊的 CSS 盒子模型介绍

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物—&mdas...

2020-10-15

226浏览

0评论

flex是什么及flex布局语法教程详解

Flex布局Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，自由的操作容器中元素(项目)的排列方式任何一个容器都可以指定为 Flex 布局。.box{...

2020-10-15

202浏览

0评论

CSS+JS实现水滴涟漪动画按钮效果的示例代码

代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...

2020-10-15

236浏览

0评论

CSS 中的六个重要选择器(三秒就可以记住)

来自：https://blog.csdn.net/qq_44761243/article/details/108227213CSS 的选择器有哪些？？？1.通配符（*）也可称作全局选择器或者通用选择器，顾名思义，就是定义所有的元素的样式。常用...

2020-10-15

142浏览

0评论

详解css3中dispaly的Grid布局与Flex布局

Gird布局与Flex布局有一定的相似性，都是对容器的内部项目进行划分。 Flex布局是轴线布局，只能指定项目针对轴线的位置，可以看作成一维布局 Grid布局则是将容器划分成行和...

2020-10-15

185浏览

0评论

CSS中三角形的绘制与巧妙应用实例详解

引网页中常见的一些三角形，无需制作成图片或者字体图标，使用CSS就可以直接画出来。如小米官网中：以及京东网页中的：那么这些三角通过是CSS怎么实现的呢？三角的实现我们可以通过将...

2020-10-15

344浏览

0评论

纯css实现轮播图banner自动轮换效果

话不多说直接上代码* { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px;...

2020-10-15

164浏览

0评论

让我来教你使用css中的字体图标的方法

首先什么是字体图标呢，那就是表面上是图标，其实它是文字，我们可以就像设置文字一样去设置字体图标，一般可以使用两种方式去设置字体图标，一种是引入css文件，然后设置特殊的class就...

2020-10-15

129浏览

0评论

CSS 首行缩进两个文字

总是在前面加上8个“ ”，因为过去大家对CSS的概念也不太熟悉，也不太重视，这种方法实现虽然比较直接，但是文字多的时候会有很多“ ”充斥在代码中，如果再...

2020-10-15

225浏览

0评论

css 中的background:transparent到底是什么意思有什么作用

有时我在看css时,看到有的css属性定义为background:transparent。意思就是背景透明。实际上background默认的颜色就是透明的属性。所以写和不写都是一样的

有段时间没写文...

2020-10-15

207浏览

0评论

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核；
-moz-border-radius：moz这个属性主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。
在这两...

2020-10-15

142浏览

0评论

CSS自定义select下拉选择框的样式(不用其他标签模拟)

今天群里有人问到怎么自定义select下拉选择框的样式，于是群里就展开了激烈的讨论，刚开始一直就是考虑怎样使用纯CSS实现，把浏览器默认的样式覆盖掉，但最后均因兼容问题处理不...

2020-10-15

159浏览

0评论

CSS 文本字体颜色设置方法(CSS color)

一、认识CSS 颜色（CSS color）这里要介绍的是网页设置颜色包含有哪些；网页颜色规定规范。1、常用颜色地方包含：字体颜色、超链接颜色、网页背景颜色、边框颜色
2、颜色规范与颜色...

2020-10-15

227浏览

0评论

css设置各种中文字体如雅黑、黑体、宋体、楷体等等

复制代码代码如下:
.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }

说明：

加上中文名“微软雅黑”是...

2020-10-15

179浏览

0评论

HTML设置超链接字体颜色和点击后的字体颜色

定义链接样式
　　CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。其中有几项是我们经常用到的，下面我们就详细介绍一下经常用于定义链接样式的四个伪类，...

2020-10-15

104浏览

0评论

css控制UL LI 的样式详解(推荐)

复制代码代码如下:
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="...

2020-10-15

257浏览

0评论

CSS 实现内容高度不够的时候底部(footer)自动贴底

在 UI 切图过程中，页面往往由三个部分组成，头部、内容和底部。当页面的内容高度不够撑满屏幕，底部（footer）就跟着内容浮动上来了，小屏幕由于高度有限看不出来异常，但如果是大屏的话...

2020-10-15

197浏览

0评论

详解浮动元素引起的问题和解决办法

一、问题多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成0。若浮动元素后面跟非浮动元素，非浮动元素会紧随其后浮动起来。若浮动元素前面还有同级元...

2020-10-15

352浏览

0评论

CSS3动画和HTML5新特性详解

一、css3动画☺css3动画相对于通过JavaScript动态改变元素样式性能更好，更加容易。CSS3中有三个关于动画的属性：transform、transition和animation。
1、transform
trans...

2020-10-15

307浏览

0评论

CSS常用样式之绘制双箭头的示例代码

一、多次调用单箭头实现了单箭头–就很容易实现双箭头了，上文已经介绍2种实现单箭头的原理：边框旋转方式、双三角覆盖方式。这次以边框旋转为例多次调用实现双箭头。
1...

2020-10-15

162浏览

0评论

CSS中flex和inline-flex的区别详解

inline-flex 和 inline-block 一样，对内部元素来说是个 display:flex 的容器，对外部元素来说是个 inline 的块。两者的区别描述： flex：将对象作为弹性伸缩盒显示 inline-...

2020-10-15

175浏览

0评论

详解CSS布局中浮动问题的四种解决方案

一、起因：子盒子设置浮动之后效果：由此可见，蓝色的盒子设置浮动之后，因为脱离了标准文档流，它撑不起父盒子的高度，导致父盒子高度塌陷。如果网页中出现了这种问题，会导致我们整个...

2020-10-15

186浏览

0评论

CSS解决inline-block的错位问题

废话不多说帖代码html部分<div class="positionleft">我是position方式的左边，占30%</div> <div class="positionright">我是position方式的右边，占70%</div>css部分...

2020-10-15

216浏览

0评论

利用纯css做一个下拉菜单功能的示例代码

导语：
这几天看面试题目的时候，经常能够看到用css去实现一个下拉菜单，但是我发现很多人却没能够做出来，最后只能勉强用js做出来。实话实说，我很震惊，这个功能实现起来很简单，甚至可...

2020-10-15

214浏览

0评论

浅谈CSS 伪元素&伪类的妙用

在一个网页中CSS占着非常重要的地位。近年来随着CSS的发展，伪元素/伪类也开始被大量应用：在性能愈加被看中的当下，处于文档流之外的CSS伪元素/伪类是当之无愧的“无冕之王...

2020-10-15

108浏览

0评论

CSS子元素选择父元素的实现

通常一个CSS选择器都是从上往下选择的，通过父元素选择子元素，那么能不能通过子元素选择父元素呢？<ul> <li> <a href="#" class="active">1</a> </li> <li>...

2020-10-15

189浏览

0评论

CSS 屏幕大小自适应的实现示例

要想实现css屏幕大小自适应，首先得引入 CSS3 @media 媒体查询器：media的使用和规则：　　①被链接文档将显示在什么设备上。　　②用于为不同的媒介类型规定不同的样式。语法： @m...

2020-10-15

186浏览

0评论

CSS中的translate(-50%,-50%)实现水平垂直居中效果

translate(-50%,-50%) 属性：
向上和左，移动自身长宽的 50%，使其居于中心位置。与使用margin实现居中不同的是，margin必须知道自身的宽高，而translate可以在不知道宽高的情况下进...

2020-10-15

热门文章