CSS - 教程之家

151浏览

0评论

详解盒子端CSS动画性能提升

流畅动画的标准理论上说，FPS 越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲 FPS 为 60frame/s 时动画效果最好，也就是每帧的消耗时间为 16.67ms。直观...

2021-05-24

210浏览

0评论

如何在CSS中绘制曲线图形及展示动画

理解 box-shadow首先，回顾一下box-shadow这个属性。基本属性用法就是给元素创造一层阴影。再简单提一下，本文会用到的关于阴影的第一个技巧：使用阴影复制图像/投影图像当 box-s...

2021-05-24

133浏览

0评论

详解CSS不定宽溢出文本适配滚动

hover 时弹出框提示一种可行的方案是在 hover 的时候，弹出一个文本框展示全文，最简单的就是在文本标签下添加 title 属性，填充我们需要的内容：<ul> <li title="溢出文本1 溢...

2021-05-24

182浏览

0评论

css如何使文字方向转90度

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...

2021-05-21

120浏览

0评论

css如何实现禁止选择文本

在 web 浏览器中，如果我们在文本上双击，文本会被选取或高亮显示。那么如果我们要禁止这种行为该怎么办呢？其实很简单，使用下面的属性就可以了。user-select 属性规定是否能选取...

2021-05-21

182浏览

0评论

纯CSS3如何实现文字效果？8种文字效果分享

今天我们来研究几款文字效果，主要利用text-shadow、webkit内核的几个独有特性实现效果。在线研究单击这里，下载收藏单击这里。效果一-立体字效果我们的html文件貌似这样，为了更...

2021-05-21

142浏览

0评论

css背景和边框标签实例详解

一、css背景标签1，设置背景颜色back-ground-color 属性指定元素的背景色。
小实例如下图所示：运行结果如下：可以通过选择器给不同的标签设置不同的颜色，在这里h1,div,和p标签将...

2021-05-21

162浏览

0评论

CSS 制作波浪效果的思路

在之前，我介绍过几种使用纯 CSS 实现波浪效果的方式，关于它们有两篇相关的文章：纯 CSS 实现波浪效果!巧用 CSS 实现酷炫的充电动画本文将会再介绍另外一种使用 CSS 实现的波浪...

2021-05-20

149浏览

0评论

CSS的class与id常用的命名规则

网页公共命名： #wrapper - - 页面外围控制整体布局宽度 #container或#content - - 容器，用于最外层 #layout - - 布局 #head，#header - - 页头部分 #foot，#foote...

2021-05-20

164浏览

0评论

关于flex 上下文中自动 margin的问题(完整例子)

为了引出本文的主题，先看看这个问题，最快水平垂直居中一个元素的方法是什么？水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这...

2021-05-20

149浏览

0评论

web前端之css水平居中代码解析

前言老板的手机收到一个红包，为什么红包没居中？如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。你也许能顺手写出好几种实现方法。但大部分...

2021-05-20

162浏览

0评论

纯CSS实现心形加载动画（附源码）

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

2021-05-17

143浏览

0评论

css超出宽度怎么显示省略号

首先，新建一个HTML文档，用于承载CSS保存以上部分，并在浏览器预览效果，此刻是，并未引入CSS设置的效果在HTML的<head>头部定义<style>标签，引入一段内联的CSS样式对h1标签定义一段CS...

2021-05-17

258浏览

0评论

css ul怎么去掉点

css去掉 ul li标签的前的点开发中ul li标签前默认存在一个小点，去掉默认点使用list-style-type: none;即可list-style-type: none;list-style介绍：list-style 简写属性在一个...

2021-05-17

188浏览

0评论

css怎么把div设置成圆角

我们可以通过添加border-radius属性可以让边角变得圆润，具体代码如下：效果：border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性，这个属性允许你为元素添...

2021-05-17

389浏览

0评论

css中resize什么意思

resize 属性规定是否可由用户调整元素的尺寸。注释：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。语法resize: none|both|horizontal|v...

2021-05-17

141浏览

0评论

css怎么实现内容超出隐藏效果

css为我们提供了一个很适合的元素text-overflow，这个属性指定当文本溢出包含它的元素，应该发生什么。语法：text-overflow: clip|ellipsis|string;属性值： clip 修剪文本。 ell...

2021-05-17

197浏览

0评论

css怎么设置按钮边框的颜色

css中为我们提供了一个非常方便的属性border-color，该属性用来设置一个元素的四个边框颜色。此属性可以有一到四个值。border-color:红，绿，蓝,粉红色; 上边框是红色右边框是...

2021-05-17

222浏览

0评论

CSS怎么禁止换行

在CSS中，可以使用white-space属性来禁止换行。示例：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style type="text/css"> div{ border: 5px solid red; ...

2021-05-17

322浏览

0评论

css如何实现按钮透明

css可以使用opacity属性设置按钮透明效果，css中opacity属性设置元素的不透明级别。IE8以及更早的版本支持替代的filter属性。例如：filter:Alpha(opacity=50)。css使用opacity...

2021-05-17

185浏览

0评论

css中行间距怎么设置

在css中并没有直接可以设置行间距的属性，所以我们就需要借助行高line-height来设置行间距，行高line-height的值越大，那么行间距就越高。line-height属性用于设置行使用的空间量...

2021-05-17

172浏览

0评论

css中padding是什么意思

CSS padding（填充）CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即元素的内边距。当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的...

2021-05-17

135浏览

0评论

css中怎么设置行高

在css中我们可以通过line-height属性来设置以百分比计的行高。属性值： normal 默认。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 le...

2021-05-15

142浏览

0评论

面试必问:圣杯布局和双飞翼布局的区别

前言今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别，这两个三行布局一直是一些大厂前端面试的高频考点，带你走进大厂面试题，活不多说，冲冲冲~布局效果这两个种三行布...

2021-05-15

205浏览

0评论

css怎么设置滚动条的高度

css设置滚动条的样式注意：滚动条设置的width、height，分别是对应纵向滚动条宽度、横向滚动条高度，无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式...

2021-05-12

250浏览

0评论

css怎么设置左边距

1、使用margin-left设置左外边距margin-left属性设置元素的左外边距。注意：负值是允许的。属性值：值描述 auto 浏览器设置的左外边距。 length 定...

2021-05-12

203浏览

0评论

css行内块元素有哪些

块标签元素：p p h1-h6 hr ul ol li dl dd dt form①支持宽高，自上而下排列②不受空格影响③一般用于其他标签的容器④默认宽度为100%（独占一行）。行内标签元素：span i a b strong...

2021-05-12

159浏览

0评论

css怎么设置div阴影

css设置div阴影<!DOCTYPE html><html><head><meta charset="utf-8"> <style> div{ width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #8888...

2021-05-12

147浏览

0评论

CSS 实现多彩、智能的阴影效果

背景有没有想过如何创建从前景元素中继承某些颜色的阴影效果？阅读本文并找出如何实现方法吧！前几天我经过家得宝（Home Depot，美国家得宝公司，全球领先的家居建材用品零售商），他们正...

2021-05-12

126浏览

0评论

css bfc是什么意思

何为BFCBFC（Block Formatting Context）块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。BFC 即 Block Formatting Cont...

2021-05-11

108浏览

0评论

css有哪些优点

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修...

2021-05-11

138浏览

0评论

你值得了解的关于CSS变量的知识点！！

CSS变量（又名自定义属性）已在Web浏览器中支持了近四年。我一般也会根据项目情况使用它们。它们非常有用且易于使用，但是前端开发人员通常可能会误用或误解它们。简介CSS变量...

2021-05-11

223浏览

0评论

解析CSS 提取图片主题色功能(小技巧)

背景起因是微信技术群里有个同学发问，有什么方法能够获取图片的主色呢？有一张图片，获取他的主色调：利用获取到的这个颜色值，来实现类似这样的功能 -- 容器中有一张图片，希望背景色...

2021-05-11

148浏览

0评论

纯CSS制作一个简单气泡对话框（图文详解）

用气泡框图片直接插入即可，但是，图片每次都需要加载，可以用CSS来实现！首先，得弄明白，气泡框是怎么实现的。知道了原理之后就可以无限变通啦！！！！先来一个基本的气泡框图！第一步，首先要有...

2021-05-10

147浏览

0评论

为什么你写的height:100%不起作用

为什么你写的height:100%不起作用？这个知识不算冷门的，但是用的时候可能还是会有些懵逼，不能生效时搜一搜就能找到答案了，但是你真的懂了吗？为什么想要设置一个全屏元素的时候，高...

2021-05-10

178浏览

0评论

background-position百分比原理详解

今天帮别人调代码时，看到一个样式：background-position: 50% 0;background-size: 100% auto；对background-size:100% auto，意思是背景图片宽度为元素宽度*100%，高度等比缩放。详...

2021-05-10

200浏览

0评论

css如何设置图片不重复拉伸

在CSS中，我们可以利用 background 属性来设置背景图片。background: url("1.jpg");但默认情况下，背景图像在水平和垂直方向上重复。那么如何让背景图片不重复？可以使用backgrou...

2021-05-06

473浏览

0评论

如何只用css实现点击按钮切换图片

今天使用CSS中的:target选择器来实现点击按钮切换相对应的图片的demo，此demo也可以使用JS来实现。demo的结构： <a href="#img1">img1</a> <a href="#img2">img2</a> <a...

2021-05-06

139浏览

0评论

css怎么实现图片居中

在进行网页布局的时候，有时候图片的位置可能会影响整个页面的美观程度，所以对于图片的放置位置就得变化，那么，接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现...

2021-05-06

339浏览

0评论

css如何设置背景图片位置

在css中，可以使用background-position属性来设置背景图片位置，进行背景图片的定位。在CSS中，背景图片的定位方法有3种：　　1）关键字：background-position: top left;　　2）像素：back...

2021-05-06

175浏览

0评论

css怎么设置悬浮效果

css设置悬浮效果（固定位置）<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>DIV悬浮...

2021-05-06

104浏览

0评论

8个值得了解的CSS性能优化小技巧

我们都知道对于网站来说，性能至关重要，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。因此，与其相关的性能优化是不容忽视的。对于性能优化我们常常在...

2021-05-06

191浏览

0评论

css怎么不占位隐藏元素

1、使用display:none不占位隐藏元素display:none可以不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样；不会被子...

2021-05-05

162浏览

0评论

css :not()选择器怎么用

:not() 选择器用于一些特殊的功能的呈现上，我举一个我使用的例子：当你的鼠标hover到这些标签的时候，会想第二个标签一样改变颜色。而当你点击第一个的时候标签“Asset Sec...

2021-04-30

93浏览

0评论

css浮动的方法是什么

浮动float的原本设计了作用初衷是为了实现文字环绕效果浮动的语法：float:left/right;使用了float:left或float:right或两者都是会产生的浮动。浮动的性质浮动是css里面布局用...

2021-04-30

220浏览

0评论

css怎么禁止滚动条滚动

css禁止滚动条滚动如此设置：body{ overflow-y: hidden; overflow-x: hidden;}overflow-x属性指定如果它溢出了元素的内容区是否剪辑左/右边缘内容。overflow-y属性...

2021-04-30

235浏览

0评论

css如何改变图片颜色

css改变图片颜色的方法：1、首先我们来了解一下mix-blend-mode 取值情况mix-blend-mode: normal; // 正常mix-blend-mode: multiply; // 正片叠底mix-blend-mode: screen; //...

2021-04-30

263浏览

0评论

css如何禁止滑动

css禁止滑动的方法：1、完全隐藏在<boby>里加入scroll="no"，可隐藏滚动条；<boby scroll="no"> 2、在不需要时隐藏指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，...

2021-04-30

96浏览

0评论

CSS 新特性 contain控制页面的重绘与重排问题

在介绍新的 CSS 属性 contain 之前，需要读者已经知道什么是页面的重绘与重排。发现之前已经描述过很多次了，可以看看这个提高 CSS 动画性能的正确姿势[1]。OK，下面进入本文正题...

2021-04-30

213浏览

0评论

css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效

首先要使用transform-origin属性，必须使用transform 属性，其有很多属性，我们只需要用到transform的rotate属性（设置2D旋转角度），再搭配 transform-origin 设置其中心点。最后搭配...

2021-04-29

热门文章