CSS - 教程之家

97浏览

0评论

css怎么设置元素透明度

CSS设置元素的透明度（不透明度）方法：使用CSS3 opacity 属性作用：设置元素的透明度语法：jsobject.style.opacity=valuecssopacity: value|inherit;参数: value：指定的透明度；范围从...

2021-07-15

167浏览

0评论

css上边距怎么设置

css设置上边距的方法一：使用margin-top属性margin-top属性可以设置元素的上外边距围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。...

2021-07-15

112浏览

0评论

css提供了几种复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。在四种CSS基础选择器中总结过 CSS 的基...

2021-07-15

113浏览

0评论

css中绝对定位什么意思

绝对定位（absolute）意思是：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没...

2021-07-15

147浏览

0评论

css不区分大小写吗？

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

2021-07-15

390浏览

0评论

网页设计css样式代码大全，快来收藏吧！

一.文本设置1、font-size: 字号参数2、font-style: 字体格式3、font-weight: 字体粗细4、颜色属性color: 参数注意使用网页安全色二、超链接设置text-decoration: 参数主要...

2021-07-09

103浏览

0评论

css字体溢出怎么隐藏

css中，可以利用overflow属性来实现字体溢出隐藏效果。下面通过代码示例来介绍一下overflow属性如何实现字体溢出隐藏<!DOCTYPE html><html><head><meta charset="utf-8"><sty...

2021-07-06

227浏览

0评论

css中text-align什么意思

text-align是css中一个内置属性，用于指定元素文本的水平对齐方式。可以设置的属性值：值描述 left 把文本排列到左边。默认值：由浏览器决定。 right ...

2021-07-06

108浏览

0评论

css中inline-block什么意思

block块级元素特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度...

2021-07-06

92浏览

0评论

值得收藏的26个css面试题，增强你的CSS基础！

CSS是层叠样式表（ Cascading Style Sheets ）的缩写，是一种样式表语言，用于描述以 HTML 之类的标记语言编写的文档的布局。它是用于设计Web页面的三剑客之一，另外两位浩客是HTML...

2021-07-06

129浏览

0评论

CSS中什么是:placeholder-shown？如何工作？有什么用？

CSS :placeholder-shown伪类是专门用于确定元素是否显示占位符的对象，主要使用它来检查input内容是否为空。本篇文章带大家了解一下:placeholder-shown伪类，详细介绍一下它是...

2021-07-06

134浏览

0评论

css不起作用的原因是什么

在写页面时，有时会发现自己写的css样式无法生效，我们该如何排查css样式无法生效？常见的css样式不起作用的原因有哪些呢？下面我们就来看一下css样式不起作用的原因。排查css样式...

2021-07-06

124浏览

0评论

css中伪类和伪对象（伪元素）区别是什么

其中伪类和伪元素（伪对象）的根本区别在于：它们是否创造了新的元素。伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存...

2021-07-06

191浏览

0评论

css中px和pt的区别是什么

px和pt，一个是设备坐标，一个是逻辑坐标，两者是不同的。pt是个绝对单位，1 pt =1/72 英寸px是个相对单位，一般像素的参考值为：在一个像素密度是90 pdi的显示器上，正常人从距离显示器2...

2021-07-06

145浏览

0评论

css 伪类有哪些

CSS伪类是用来添加一些选择器的特殊效果，是用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。例如：当用户悬停在指定元素时，可以通过:hover...

2021-07-06

196浏览

0评论

给元素设置圆角半径的css属性是什么

给元素设置圆角半径的css属性是border-radius。border-radius属性可以设置元素的外边框圆角；使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。语法：border-radius:...

2021-07-06

164浏览

0评论

详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)

一. overflow:hidden 溢出隐藏给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。/*css样式*/<style type="...

2021-07-02

87浏览

0评论

CSS中Single Div 绘图技巧的实现

经常能看到有关 CSS 绘图的文章，譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的方式就是通过堆叠 div，一步一步实现图画中的一块一块。这种技巧本身没有什么问题，但是就...

2021-06-29

137浏览

0评论

CSS3实现列表无限滚动/轮播效果

效果预览思路将当前列表滚动至最后一项的末尾，然后瞬间切换回第一项问题点1.用什么方式实现无限轮播
这个问题就是列表滚动到最后时底部会留白(有多余空间)如何处理？
在列表的...

2021-06-29

119浏览

0评论

CSS变量实现主题切换的方法

CSS 变量基本用法声明一个变量，属性名需要以两个减号（--）开始，属性值则可以是任何有效的CSS值。element { --main-bg-color: brown;}选择器是指定变量的可见作用域，该变量仅用于...

2021-06-29

91浏览

0评论

CSS实现章节添加自增序号的方法

开始当我们想写一个类似掘金的文章或者自己的博客的时候，是否有想过该怎么实现给自己文章的章节添加章节号，给小标题增加标题号，或者给列表增加列序号，简单的静态文本我们或许可...

2021-06-29

82浏览

0评论

深入理解margin塌陷和margin合并的解决方案

前言小问题总是被人视而不见，等遇到的时候又突然想不起来，所以我们需要经常总结，这可以帮助我们更好的记忆东西。今天我们来总结两个不起眼的小问题：margin塌陷和margin合并marg...

2021-06-29

187浏览

0评论

CSS 伪元素::marker详解

本文将介绍 CSS 中一个比较有意思的伪元素 ::marker，利用它，我们可以让我们的文字序号变得更加的有意思！什么是 ::markerCSS 伪元素 ::marker 是从 CSS Pseudo-Elements Level...

2021-06-29

86浏览

0评论

关于CSS浮动与取消浮动的问题

浮动的定义设置元素脱离正常的文档流，使元素向左或向右靠近。父元素的边缘，或者其他设置了浮动的元素的边缘浮动解决的问题1.解决文字包围图片的问题
2.解决间隔问题
3.可以向...

2021-06-29

119浏览

0评论

html css3不拉伸图片显示效果

1.利用transform属性不拉伸显示图片,(路径问题需要按需求修改）；html:<div id="surface-div1"><img :src="pic1" class="surface-img"></div>CSS:#surface-div1{ position:...

2021-06-09

232浏览

0评论

css height属性中的calc方法详解

什么是calc()?学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东东？在实际运用中更好的使用他。calc()从字面我们可以把他理解为一个函数function。其实cal...

2021-06-05

102浏览

0评论

CSS极坐标的实例代码

前言项目有图表方面的需求，其中有做卫星定位的图形，需要制作极坐标来显示当前北半球或南半球的卫星分布情况。第一时间想到了echarts的极坐标，找到示例，虽然满足了部分需求，但是...

2021-06-05

107浏览

0评论

HTML+CSS 实现顶部导航栏菜单制作

导航栏的制作：技术要求： CSS HTML各类标签实现目的：制作导航栏菜单代码分析：基本样式清除无序列原点删除下划线删除文字默认居中 a标签设置块级元素...

2021-06-05

189浏览

0评论

html+css实现分层金字塔的实例

本文主要介绍了html+css实现分层金字塔的实例，分享给大家，具体如下：先上效果再看代码直接上代码// html <div class="finetriangle"> <div class="sanjiao"> <!-- 金字塔 --...

2021-06-01

148浏览

0评论

html+css实现文字折叠特效实例

本文主要介绍了html+css实现文字折叠特效实例，分享给大家，具体如下：效果：实现：1. 定义标签： <h1>aurora</h1>2. 设置文字基本样式：h1{ text-transform: uppercase;...

2021-06-01

116浏览

0评论

css如何设置竖排文字

CSS几种简单方法实现文字竖向排版下面介绍几种使用Css实现文字竖向排版的方法：1.一个句子的竖向排列如图： <!DOCTYPE html> <html> <head> <title>test</title> <...

2021-05-27

95浏览

0评论

css删除线颜色怎么设置

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。text-decoration 属性是以下三种属性的简写：text-decoration-linetext-decoration-colortext-decorati...

2021-05-27

138浏览

0评论

css怎么设置transform

css怎么设置transform？transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。语法transform: none|transform-functions;代码示例：<!DO...

2021-05-27

125浏览

0评论

css怎么实现半圆

css怎么实现半圆？半圆半圆分为：上半圆、下半圆、左半圆、右半圆，我们只要学会制作某一个方向的半圆，其他方向的半圆都可以轻松实现，其原理都一样。假如我们要制作上半圆，实现原理：...

2021-05-27

93浏览

0评论

css怎么增加阴影

css怎么增加阴影？box-shadow 属性向框添加一个或多个阴影。提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！语法box-shadow: h-shadow v-shadow blur spread color in...

2021-05-27

139浏览

0评论

css文字不环绕怎么办

css实现文字环绕图片，--遇到问题及取消文字环绕效果我之前在写一个外国博客的时候遇到了一个问题，关于文字环绕显示问题:1.图片浮动，中文文字会发生环绕效果<!DOCTYPE html><ht...

2021-05-27

129浏览

0评论

css设置表格的属性有哪些

CSS表格：属性描述 border-collapse 设置是否把表格边框合并为单一的边框。 border-spacing 设置分隔单元格边框的距离。 ...

2021-05-27

230浏览

0评论

HTML+CSS制作心跳特效的实现

今天来制作一个简单的心跳效果，不需要很多代码，添加一个盒子，充分利用CSS展现就可以啦。1.首先我们在页面添加一个可视化的盒子<body> <div class="heart"></div> </body>2.然...

2021-05-26

146浏览

0评论

html+css实现赛博朋克风格按钮

先看效果：前言：这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯css），下面是详细过程。最后面有完整代码。实现：1. 首先定义一个div标签作为按钮，类名为 .anni...

2021-05-26

124浏览

0评论

浅谈由position属性引申的css进阶讨论

1.normal flow　　　　　　　　　normal flow(正常流):正常流是默认的定位方式。任何没有具体指定{position:absolute}或者{position:fixed}属性以及没有被浮动的元素都将默...

2021-05-26

83浏览

0评论

详解CSS伪元素的妙用单标签之美

:before和::before的区别在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。有时你会发现伪类元素使...

2021-05-26

99浏览

0评论

详解CSS不受控制的position fixed

失效的 position:fixed在许多情况下，position:fixed将会失效。MDN用一句话概括了这种情况：当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。What！还有这种操...

2021-05-26

117浏览

0评论

详解CSS故障艺术

概述本文的主题是 Glitch Art，故障艺术。什么是故障艺术？我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉，看起来具有闪烁、震动的效果，很吸引人眼球...

2021-05-26

173浏览

0评论

浅谈CSS不规则边框的生成方案

需求背景，给不规则图形添加边框在我们日常开发中，时长会遇到一些非矩形、非圆形的图案。类似下面这些：使用纯 CSS，搭配一些技巧，是可以制作出上面的图形的，当然这只是需求的第一步...

2021-05-26

116浏览

0评论

浅谈巧妙使用 CSS 制作波浪效果的思路

从定积分实现曲边三角形面积说起在进入主题之前，先看看这个，在高等数学中，我们可以通过定积分求二次函数曲边图形面积。我们可以将曲线下的面积分割成 n 个的细高的矩形，当 n 无...

2021-05-25

125浏览

0评论

CSS filter 有什么神奇用途

背景基本概念CSS filter属性将模糊或颜色偏移等图形效果应用于元素形成滤镜，滤镜通常用于调整图像，背景和边框的渲染。它的值可以为 filter 函数 <filter-function> 或使用 ur...

2021-05-25

95浏览

0评论

详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性

文本将介绍 CSS 媒体查询中新增的几个特性功能： prefers-reduced-motion prefers-color-scheme prefers-contrast prefers-reduced-transparency prefers-red...

2021-05-25

88浏览

0评论

详解CSS玩转图片Base64编码

什么是 base64 编码?　　我不是来讲概念的，直接切入正题，图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。这样做有什么意义呢？我们...

2021-05-25

176浏览

0评论

纯CSS3实现3d立体文字效果（源码分析）

1.单单纯纯的效果一为了简化操作，我们使用和上一篇文章《纯CSS3文字效果推荐》一样的文档结构，后面的效果大差小不差，也就不再列出。<div contenteditable="true" class="text...

2021-05-24

88浏览

0评论

css分割线怎么设置

用display:inline-block实现这个属性通俗一点的解释就是让块级元素可以在一行显示。既是块级元素又可以在同一行显示就可以设置display:inline-block.我们看下面的代码是如...

2021-05-24

热门文章