CSS - 教程之家

75浏览

0评论

你可能不了解的CSS网格函数！

fit-content()fit-content函数，接收一个参数，长度值，可以按照字面意思来解释他的作用，"适应内容"。<div class="fit-content-wrapper"> <div class="fit-item item1">test1dsss...

2021-03-06

110浏览

0评论

css怎么让两个div在同一行显示

在HTML中，div元素是一个块状元素，每个块级元素都是独自占一行；因而多个div元素无法在一行显示。那么怎么让两个div在同一行显示？下面给大家介绍一下。方法1：使用display属性让其...

2021-03-06

101浏览

0评论

利用css实现一个抽奖动画效果

首先我们先来看下最终的运行效果：从效果图我们可以看到，抽奖会自动进行，并显示中奖信息。这个效果基本是用CSS实现的，没有用图片，加一丢丢JS。完全没有考虑兼容性。具体步骤如下：...

2021-03-06

62浏览

0评论

css3中实现动画有哪两种方式

1、利用transition设置过渡，添加transform设置形状，形成动画效果，如下：.divadd { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out;...

2021-03-06

121浏览

0评论

html怎么设置button大小及颜色

HTML <button> 标签<button> 标签定义一个按钮。在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。html设置bu...

2021-03-06

96浏览

0评论

巧用 CSS3的webkit-box-reflect 倒影实现各类动效

在很久之前的一篇文章，有讲到 -webkit-box-reflect 这个属性 -- 从倒影说起，谈谈 CSS 继承 inherit-webkit-box-reflect 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反...

2021-03-06

117浏览

0评论

css animation配合SVG制作能量流动效果

最终效果如下:
动画分成两步制定运行轨迹创建DOM并按照轨迹动画制定运行轨迹我们先要画一条底部的淡蓝色半透明路劲做为能量流动的管道
这里用SVG的path去做(其实这...

2021-03-06

122浏览

0评论

如何通过 CSS 写出火焰效果

正文从下面开始。下载：纯CSS3实现超逼真的蜡烛火焰燃烧动画效果源码今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。嗯，长什么样子？在 CodePen 上输入关键字CSS Fire，能找到...

2021-03-06

94浏览

0评论

使用CSS计数器美化数字有序列表的实现方法

在web设计中，使用一种井井有条的方法来展示数据是十分重要的，这样用户就可以很清晰的理解网站所展示的数据结构和内容，使用有序列表就是实现数据有组织的展示的一种简单方法。...

2021-03-06

103浏览

0评论

CSS弹性布局FLEX,媒体查询及移动端点击事件的实现

flex弹性布局定义： Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目容器默认存在两根轴：水平的主轴（ main axis ）和垂...

2021-03-03

150浏览

0评论

CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码

前端css3,filter实现不但可以实现网页灰色效果，还可以辅助实现黑夜模式效果。我们来看看实现方式吧！filter属性介绍filter: none | blur() | brightness() | contrast() | dro...

2021-03-03

93浏览

0评论

从一次项目重构说起CSS3自定义变量在项目的使用方法

关于CSS3变量声明变量的时候，变量名前面要加两根连词线（--）。body{ --color:red;}上面代码中，body选择器里面声明了一个自定义变量：--color 。它与color等正式属性没有什么不...

2021-03-03

87浏览

0评论

纯CSS实现页面中的列表收拉效果

你可能经常见到下面这样的效果：没错，就是页面上常用的“展开收起”交互形式，通常的做法就是控制display属性值在none和其他值之间切换，但是虽说功能可以实现，效果却非...

2021-03-03

132浏览

0评论

css圆形镂空(优惠券背景图)的实现

本文主要介绍了css圆形镂空(常用做优惠券背景图)，分享给大家，具体如下：.hollow-compose-three-circles { width: 300px; height: 100px; position: relative; background:...

2021-03-03

270浏览

0评论

详解利用css3的var()实现运行时改变scss的变量值

var()介绍与使用详情(MDN) IE无效,其余主流浏览器有效var()使用只能在{}内声明,作用范围由{}的选择器决定body{ --name:value;//body内有效}.te...

2021-03-03

100浏览

0评论

css阴影效果如何实现

css阴影效果的实现方法：使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。基本用法外阴影box-shadow:2px 2px 5px #0...

2021-03-02

102浏览

0评论

css如何实现多行省略号

css实现多行省略号的方法：概述：webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。为了...

2021-03-02

103浏览

0评论

在html中float不属于盒子属性吗

盒子模式（模型）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将...

2021-03-02

98浏览

0评论

css中清除浮动有哪几种方式

CSS中清除浮动的四种方式如下：1、clear:both清除浮动HTML代码： <div class="container"> <div class="left">left浮动</div> <div class="right">right...

2021-03-01

269浏览

0评论

css p标签怎么设置不换行

css如何设置p标签不换行？p标签是块级元素，会独占一行。如果我们想要设置两个p标签在同一行该如何设置呢？下面我们来看一下使用css设置p标签不换行的方法。默认情况下p标签会自...

2021-03-01

93浏览

0评论

css怎么设置图片位置居中

具体方法如下：1、利用display:table-cell，具体代码如下：html代码如下：<div class="img_wrap"> 　　<img src="wgs.jpg"></div>css代码如下：.img_wrap{ width: 400px; heigh...

2021-03-01

209浏览

0评论

css如何将图片设置为圆形图片

属性介绍：border-radius 属性允许我们为元素添加圆角边框。语法：border-radius: 1-4 length|% / 1-4 length|%;注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如...

2021-03-01

118浏览

0评论

css如何设置背景透明

css设置背景透明的方法：1、创建一个html文件。如图2、在html文件找到一个<body>标签，在这个标签里创建一个<div>标签并添加一个类，在这把这个类设置为：rgba。如图代码：<div clas...

2021-03-01

66浏览

0评论

css阴影边框怎么设置

css阴影边框的设置方法：1、打开前端开发工具，新建一个html文件，然后在这个html文件上创建两个<div>用来设置阴影边框，最后这两个div添加样式类为: in、out。如图：代码：<div class=...

2021-03-01

99浏览

0评论

css如何让头像自动旋转

相关属性介绍：Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。语法：transform: none|transform-functions;具体代码如下所示：html结构：<body> ...

2021-03-01

326浏览

0评论

css如何设置字体位置

css设置字体位置的方法：方法1：使用text-align属性设置字体的位置text-align属性指定元素文本的水平对齐方式。语法：text-align : left | right | center | justifytext-align参...

2021-03-01

107浏览

0评论

position属性有哪些

position属性有：1、position: relative;相对定位1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也...

2021-03-01

104浏览

0评论

css怎么设置文字透明效果

相关属性：Opacity属性设置一个元素的透明度级别。语法：opacity: value|inherit;属性值： value 指定不透明度。从0.0（完全透明）到1.0（完全不透明） inherit Opacity属性的值应该从...

2021-03-01

104浏览

0评论

纯CSS实现图片左右翻转效果（附代码）

CSS 翻转图片主要用到的技术除了3D翻转和定位，还用到了一个属性 backface-visibility：visable|hidden;该属性主要是用来设定元素背面是否可见。效果图如下：具体的步骤如下：1、...

2021-02-25

146浏览

0评论

浅谈jQuery+CSS实现前端网页加载进度条的三种方式

前端网页加载进度条的实现有三种方式，看自己需求：一、顶部进度条在html代码中间插入jq代码执行动画。页面加载到哪部分，进度条就会相应的向前走多少当全部加载完成后将loading...

2021-02-25

135浏览

0评论

css中keyframes是什么意思

CSS @keyframes规则@keyframes规则用于指定动画规则，定义一个CSS动画的一个周期的行为。定义动画，必须从@keyframes规则开始。@keyframe规则由关键字“@keyframes”...

2021-02-25

236浏览

0评论

css标签与标签怎么设置距离

在css中，可以使用margin系列属性来设置标签与标签间的距离。 margin：在一个声明中设置所有外边距属性 margin-bottom：设置元素的下外边距 margin-left：设置元素的左外边距 m...

2021-02-25

174浏览

0评论

css段落缩进属性是什么

css段落缩进属性是“text-indent”。中文排版有个习惯，每个正文段落的首行开始处应保持两个中文字的空白。在css中专门有个text-indent属性可以控制段落的首行缩进...

2021-02-25

319浏览

0评论

css怎么设置字体白色描边

css设置字体白色描边1、使用text-stroke属性text-stroke属性用于向文本添加描边。此属性可用于更改文字的描边宽度和颜色。使用-webkit-前缀支持此属性。text-stroke是text-...

2021-02-25

144浏览

0评论

css颜色有几种写法

css颜色的几种写法1、使用颜色名虽然目前已经命名的颜色约有 184 种，但真正被各种浏览器支持，并且作为 CSS 规范推荐的颜色名称只有 16 种，如下表所示。表1：CSS 规范推荐的颜色...

2021-02-25

102浏览

0评论

css link与import的区别是什么

在html中引入外部的CSS有2种方式，link标签和@import，那么它们之间什么区别呢？1、从属关系区别@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以...

2021-02-24

105浏览

0评论

css中如何让文字大小改变

文字属性介绍：font-size 属性用于设置字体大小。属性值：演示代码：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>php中文网</title><style>h1 {font-size:250%;}h...

2021-02-24

142浏览

0评论

在css中设置边框可以用哪些属性

边框属性简介：CSS边框属性允许你指定一个元素边框的样式和颜色。常用属性： border 简写属性，用于把针对四个边的属性设置在一个声明。 border-style 用于设置元素所有边框的...

2021-02-24

99浏览

0评论

css3中怎么调节透明度

属性介绍：opacity 属性设置元素的不透明级别。语法：opacity: value|inherit;属性值： value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 inherit 应该从父元素继承 opa...

2021-02-24

80浏览

0评论

css怎么设置鼠标光标形状

属性介绍：cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。常用属性值： text 此光标指示文本。 wait 此光标指示程序正忙（通常是一只表或沙漏）。 help 此...

2021-02-24

89浏览

0评论

css设置外边距的属性名是什么

css 外边距属性 margin：在一个声明中设置所有外边距属性 margin-bottom：设置元素的下外边距 margin-left：设置元素的左外边距 margin-right：设置元素的右外边距 margin-top...

2021-02-24

79浏览

0评论

css怎么调整行距

属性简介：line-height属性用来设置以百分比计的行高。属性值： normal 默认。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length 设置...

2021-02-24

81浏览

0评论

详解CSS多种三列自适应布局实现

前言为了按照常规WEB布局，这里全部采用拥有header和footer模式进行左中右布局编写。第一种：基于float实现实现思路常规思路，使左右两个Aside分别浮动至左右两侧即可代码实现<!-...

2021-02-24

97浏览

0评论

css怎么设置变成小手

cursor 定义和用法cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。注...

2021-02-23

258浏览

0评论

css的选择器不包括什么

css的选择器不包括“超文本标记选择器”。css的选择器包括类选择器、标签选择器、ID选择器、伪类选择器等等。类选择器，比如class类型 class = "nav"的话，那么css对...

2021-02-23

112浏览

0评论

css怎么让div文字竖着

css设置文字竖着排列的方法：1、writing-mode（设置对象书写方向）　　语法：writing-mode : lr-tb、tb-rl　　参数：lr-tb：从左向右，从上往下　tb-rl：从上往下，从右向左　　示例：css代码：d...

2021-02-23

157浏览

0评论

css怎么去除table的间隙

css table去掉表格中单元格之间的间距表格单元格之间出现间距：去掉单元格之间的间隔是：table { border-collapse:collapse; }正常效果...

2021-02-23

76浏览

0评论

什么是css的高度塌陷

如果父元素只包含浮动元素，且父元素未设置高度和宽度，那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”。如果父级元素包含背景或者边框，那么溢出的元素就不像父级...

2021-02-23

93浏览

0评论

css盒子中的图如何居中

css让图片在div盒子里居中第一种：用css的position属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style type="text/css"> .div1 { width: 200px; hei...

2021-02-23

120浏览

0评论

CSS层样式表有哪几种类型

CSS即层叠样式表（Cascading Style Sheets），是一种用来表现HTML或XML等文件样式的计算机语言。 CSS样式主要包含以下三种类型：1、行内样式表（内联式样式）利用style属性将样式写在HT...

2021-02-23

热门文章