CSS - 教程之家

129浏览

0评论

css怎么降低背景透明度

css降低背景透明度方法1：使用opacity属性Opacity属性设置一个元素了透明度级别。从0.0（完全透明）到1.0（完全不透明）<!DOCTYPE html><html><head><meta charset="UTF-8"><style ty...

2022-01-20

169浏览

0评论

怎么用css样式把图片改为灰色

在css中，可以利用filter属性来把图片改为灰色。filter 属性定义了元素(通常是<img>)的可视效果，即给图片添加滤镜效果，例如：模糊与饱和度。当filter 属性的值为grayscale(%)，可将...

2022-01-20

107浏览

0评论

css怎样改变一个图片高度和宽度

在css中，可以使用width和height属性来改变一个图片高度和宽度。width属性可设置元素的宽度，height属性可设置元素的高度。示例：<!DOCTYPE html><html> <head> <style> .img1...

2022-01-20

287浏览

0评论

css怎么实现图片放大缩小动画

在css中，可以使用animation属性、“@keyframes”规则、transform: scale()实现图片放大缩小动画。示例1：<div class="ballon"></div>/*css部分*/ @keyframes scal...

2022-01-20

94浏览

0评论

css怎么实现鼠标移上去旋转效果

css实现鼠标移上去旋转效果旋转效果可以利用animation属性和“@keyframes”规则创建动画实现。而鼠标移上元素，触发旋转动画需要使用:hover选择器。（:hover 选...

2022-01-20

97浏览

0评论

css3如何让animation动画停止

在css3中，可用animation-play-state属性来让运行的animation动画停止。例如：有这么一个不断旋转的动画：<!DOCTYPE html><html> <head> <style> div { width: 100px; h...

2022-01-20

156浏览

0评论

css怎么实现梯形

我们先理理思路，大家想一想，梯形是怎么构成的，小学的数学课本都讲过的，就拿等腰梯形来说，是由两个直角三角形，和一个长方形或正方形组成的，看草图↓　　这意味着，我们要用一个&...

2022-01-20

244浏览

0评论

css3球体怎么实现

css3实现球体的步骤：1、基本形状我们先来实现一个基本的圆，HTML 代码如下：<figure class="circle"></figure>　这里使用的是 HTML5 新增标签 figure，也可以用其它标签。figure...

2022-01-20

116浏览

0评论

css怎么调整中文字间距

在css中，可以利用letter-spacing属性来调整中文字间距。letter-spacing属性可增加或减少字符间的空白，即设置字符间距。letter-spacing属性定义了在文本字符框之间插入多少空...

2022-01-20

164浏览

0评论

css图片的边框怎么设置颜色为渐变色

在css中，可以利用border-image属性和linear-gradient()函数来将图片边框的颜色设置为渐变色 border-image属性用于设置图片边框 linear-gradient()函数用于实现线性渐变实...

2022-01-20

113浏览

0评论

css中段落边框如何设置

css设置段落边框1、使用border属性<!DOCTYPE html><html> <head> <style type="text/css"> p{ padding: 10px; border: 1px solid red; } </style> </head> <bo...

2022-01-20

86浏览

0评论

怎样给select添加css样式

html中给select添加css样式给select标签添加id或class属性并设置属性值在style标签对中，使用id或class选择器选中select元素并设置样式实现代码：<!DOCTYPE html><html> <h...

2022-01-20

78浏览

0评论

手把手教你CSS架构之SMACSS

因为 CSS 只有一个作用域，如果不注意维护 CSS 代码，则会导致我们写的代码难于阅读和维护，于是我们借助网页本身是有层次的，抽象出来了BEM 方法论。BEM 简单的三层分法，在应对小中...

2022-01-20

135浏览

0评论

css3如何让盒子水平居中

在CSS中如何让盒子水平居中是很常见的面试题，盒子居中是相对于父元素来说的，因此我们让盒子居中时，往往采用嵌套的方式，让父盒子套着子盒子。在父子盒子嵌套下，让子盒子居中的方...

2022-01-20

172浏览

0评论

css怎么设置按钮中的字大小

在css中更改按钮中字体大小的方法1、首先，在页面中创建两个按钮，并定义class类用于对比； <body> <button type="button" class="btn">字体为20px</button> <button type="b...

2022-01-20

149浏览

0评论

手把手教你使用CSS制作动态饼图（附代码）

饼图是常见的组件，可让你显示整体的各个部分，你可以将它们用于许多不同的场景。你会发现很多关于构建这样一个组件的文章，但它们通常要么依赖于 SVG，要么依赖于大量的 HTML 元...

2022-01-20

184浏览

0评论

css3实现动画的好处有哪些

css3动画的属性总的来说只有transform(变形)，transition(过渡)，和animation(动画)这三种。transition:1s(过渡的动画效果)：从一个人具体的值到另一个过渡的值transform:rotate(...

2022-01-13

131浏览

0评论

整理分享5种纯CSS实现炫酷的文字效果

CSS是一门很特殊的语言，你认为CSS只能用来控制网页的结构与样式，但只要你有丰富的想象力，就能创造无限可能。一.渐变文字效果该效果主要利用background-clip:text配合color实现...

2022-01-13

145浏览

0评论

要过年了，使用CSS实现一个喜庆的灯笼动画效果！

过年了~ 过年了~ 过年了~辞旧迎新过年啦张灯结彩春节啦~金鸡起舞送福啦新的一年福来啦~文章开头几句歌词，顿时显得喜庆了不，我们的灯笼是下面这个样子的。animation属性画灯...

2022-01-10

161浏览

0评论

一篇文章读懂css单位就够了

说起CSS单位，我们最熟悉的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式...

2022-01-07

128浏览

0评论

CSS高频出现的奇怪按钮样式总结

先让我们来看看这些经常会出现的按钮形状：矩形与圆角按钮正常而言，我们遇到的按钮就这两种 -- 矩形和圆角：它们非常的简单，宽高和圆角和背景色。 <div class='btn rect&#...

2022-01-06

122浏览

0评论

如何理解css的预处理器、后处理器以及选择器

css预处理器css预处理器：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。css存在的问题：语法不够强大，比...

2022-01-05

101浏览

0评论

使用CSS实现一个吃豆人的Loading加载效果

CSS确实是魅力大的离谱，可能最近一段时间关注我文章的会知道，我发了好多跟CSS有关的文章了，有的是看到网上有这种效果，自己进行复刻，有的是利用一个自己刚看到的知识点，运用它去做...

2022-01-05

186浏览

0评论

13个常用CSS字体样式属性，你知道哪几个呢？

1. CSS字体样式属性1.1 font-size 字体大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。 font-size: 14px; // px 绝对像素单位font...

2022-01-03

228浏览

0评论

史上最全的CSS中hack方式一览

什么是CSS hack由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面...

2021-12-29

83浏览

0评论

css3中content的用法是什么

2021-12-29

97浏览

0评论

CSS三大特性继承性、层叠性和优先级详解

1.css属性的继承CSS中有些属性是可继承的，何为属性的继承？一个元素如果没有设置某些属性的值，就会跟随（继承）父元素的属性值。当然，一个元素如果有设置自己的属性值，就会使用自...

2021-12-28

153浏览

0评论

绚丽的极光用CSS也能实现！

观察了一些极光的图片之后，我发现了极光动画中一些比较重要的元素：基于深色背景的明亮渐变色彩类似于水波流动的动画效果明亮渐变色彩我们可以尽量使用渐变模拟。而水波流...

2021-12-28

74浏览

0评论

你必须了解后端也得会的两万字CSS技术

第一部分：CSS的基本使用（1）CSS是什么？CSS全称Cascading Style Sheets，翻译：层叠（级联）样式表。
如果说HTML是网页的结构，那么CSS就是网页化妆师。（2）CSS写在哪里？CSS有三种写法：直接写在...

2021-12-27

105浏览

0评论

值得收藏的CSS盒子模型属性详解

CSS盒子模型一、什么是盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边...

2021-12-25

117浏览

0评论

深入浅析了解CSS中定位布局的细节

1.&ensp;相对定位1.1) 什么是相对定位相对定位：盒子可以根据自己原来的位置进行位置调整(通过位置描述词实现)。位置描述词：
left: 向右移动； right 向左移动；top 向下移动；botto...

2021-12-22

116浏览

0评论

CSS使用伪类控制边框长度的方法

前言：如图：我们需要实现一个边框长度比容器长度小一些的边框时，以往大多数都是使用div嵌套。现在只需要使用伪类就可以实现这个效果，并且使用起来很方便。这里使用的是微信小程...

2021-12-20

113浏览

0评论

在CSS中使用when/else的方法

目录when/else 语法更多用法组合使用内联使用新的媒体查询写法总结大家都知道CSS已经有@media、@support 查询形式的条件，可以非常灵活地选择对应的样式，然而还有一个新的提议...

2021-12-20

258浏览

0评论

使用CSS设置滚动条样式

因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的CSS也能解决。比如网易邮箱的滚动条样子很好看，就是利用的CSS来设置的，而且是webkit浏览...

2021-12-20

124浏览

0评论

最通俗易懂的CSS浮动float属性详解(图文详细)

CSS 浮动float属性详解很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。前些天终于搞懂了浮动的基本原理，迫不及待的分享给...

2021-12-20

176浏览

0评论

css定位position属性应该怎样用（实例详解）

定位(position)background-position 背景定位如果，说浮动，关键在一个 “浮” 字上面，那么我们的定位，关键在于一个 “位” 上。PS: 定位是我们CSS算是数...

2021-12-20

117浏览

0评论

css必须要知道的盒子模型重点是什么（整理分享）

其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一...

2021-12-20

144浏览

0评论

怎样用css3实现鼠标悬停时的阴影效果

怎样用css3实现鼠标悬停时的阴影效果在css中，想要实现鼠标悬停时的阴影效果，可以利用“:hover”选择器和“box-shadow”属性实现。box-shadow属性可以设...

2021-12-14

224浏览

0评论

css3怎样实现img等比例缩小

css3怎样实现img等比例缩小在css中，想要实现img元素的等比例缩小，需要利用到transform属性配合scale()函数实现。transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对...

2021-12-14

156浏览

0评论

css3中实现旋转效果的属性是什么

css3中实现旋转效果的属性是“transform”。transform属性用于向元素应用2D或3D转换，当该属性和以下函数一起使用即可实现元素旋转： rotate(angle) 定义 2D 旋转，在...

2021-12-14

95浏览

0评论

css3中实现2d旋转的函数是什么

css3中实现2d旋转的函数是什么在css中，实现2d旋转的函数是rotate()函数。rotate()函数配合transform属性使用时，能够对元素进行2d旋转操作。transform 属性向元素应用 2D 或 3...

2021-12-14

129浏览

0评论

css3怎样实现选择表格的偶数行

css3怎样实现选择表格的偶数行在css中，想要选择表格的偶数行元素，需要利用“nth-child()”选择器。:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素...

2021-12-14

122浏览

0评论

css样式中focus是什么意思

css样式中focus是什么意思在css中，focus是焦点的意思，通常表示的是“:focus”选择器，“:focus”选择器用于选取获得焦点的元素。接收键盘事件或其他用户输...

2021-12-14

200浏览

0评论

css选择器怎么选择倒数第几个元素

css选择器怎么选择倒数第几个元素在css中，想要利用选择器选择倒数的第几个元素，可以利用:nth-last-child(n) 选择器。:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元...

2021-12-14

104浏览

0评论

css字体大小单位可以是em吗

css字体大小单位可以是em吗css字体大小单位可以是em。在页面整体布局中，页面元素的尺寸大小（长度、宽度、内外边距等）和页面字体的大小也是重要的工作之一。一个合理设置，则会让...

2021-12-14

89浏览

0评论

css中定位属性是哪个

css中定位属性是哪个在css中，元素的定位属性是position。position属性的作用就是规定元素的定位类型，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或...

2021-12-14

220浏览

0评论

css怎样实现图片出现一秒后消失效果

css怎样实现图片出现一秒后消失效果在css中可以利用animation属性和@keyframes 规则来实现图片出现一秒后消失效果，通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将...

2021-12-14

260浏览

0评论

css样式中星号代表什么

css样式中星号代表什么在css中，星号代表的是“所有元素”，“*”选择器能够选取所有的元素或者一个元素中的所有元素。星号选择器（*）表示选中所有的元素* 选...

2021-12-12

184浏览

0评论

css怎样缓慢改变元素高度

css怎样缓慢改变元素高度在css中，可以利用animation属性和@keyframes 规则来实现元素缩放的动画效果，通过 @keyframes 规则，能够创建动画。创建动画的原理是，将一套 CSS 样式逐...

2021-12-12

283浏览

0评论

如何用css截取部分图片

如何用css截取部分图片在css中，可以利用clip属性来截取部分图片，该属性能够对绝对定位的元素进行裁剪。因此我们需要先将图片设置为绝对定位样式，然后利用clip属性截取即可。cl...

2021-12-12

热门文章