css中背景图怎么设置平铺方式
默认情况下，如果一幅背景图像不足以占满整个容器时，就会在水平方向和垂直方向重复，以填满整个容器。然而，有时候却希望背景图像只出现一次，或只在某个方向上重复。这时，就可以通过...
2021-09-30
很实用！CSS实现在单击按钮时显示按下的动态效果
本文将给大家介绍在前端设计过程中非常实用的一个动态效果，就是在单击按钮时显示按下的动态效果，光说可能大家还不明白是什么效果，我们可以直接看一个动图：不过本文不仅会介绍实...
2021-08-27
利用CSS3创建实用的加载动画效果（两种）
在进入网站时，因为需要显示许多图片，往往需要加载一段时间。如果这里添加一个动态的加载效果，这样就不会让等待变得枯燥。例如下图这样：本篇文章就来给大家分享两种使用CSS3实现...
2021-08-27
用HTML/CSS制作有趣的动态波浪形文本行
本文将带大家用HTML/CSS制作一种有趣的动态波浪形文本行效果！下面我们直接看完整的代码示例：<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <title></title>...
2021-08-27
教你用CSS绘制一个带有渐变边框的圆！
本文将继续给大家介绍怎么用css实现一个带有渐变边框的圆。首先我给大家简单说一下实现思路：我将创建两个 div，一个是类名为outer_circle 的外部 div，另一个是类名为inner_circ...
2021-08-27
超实用！利用CSS3将两个图片叠加在一起显示
今天本文给大家分享两种利用CSS3将两个图片叠加融合在一起显示的特效。废话不多说，我们直接开始吧~第一种方法：利用mix-blend-mode属性<!DOCTYPE html><html> <head> <meta c...
2021-08-27
如何用css快速创建3点加载动画
本文将给大家介绍在前端开发过程中最常见的一种效果实现，也就是加载动画的实现。简单来说，比如常见的网页加载等待的效果loading.....，通常都是动态的加载效果。下面我就给大家...
2021-08-25
纯CSS3创建边框阴影向外扩散的动画特效
今天本篇文章给大家分享一个边框动画特效，看看使用CSS3如何实现边框阴影向外扩散的动画特效。我们先来看看效果图：下面我们来研究一下是怎么实现这个效果的：首先创建HTML部分，定...
2021-08-25
手把手教你使用CSS3实现按钮悬停闪烁动态特效
而今天我们来看看使用CSS3怎么给按钮添加动态效果，实现一个按钮悬停闪亮阴影动画效果，让网页互动性更强，更吸引人！我们先来看看效果图下面我们来研究一下是怎么实现这个效果的：首...
2021-08-24
纯CSS3怎么给文本添加背景图
今天我们我们来看看使用CSS3怎么给文本添加背景图，让文字变得生动好看！在我们想要创建一个较大的文本标题，但不想使用普通又枯燥的颜色来修饰时，非常有用！我们先来看看效果图：下面...
2021-08-24
手把手教你怎么使用css3给文字添加动画效果（附代码）
在这类网站中能看到，无论是文字还是图片，都随着规定时间的而变化。css3的主键强大原理很简单，主要用到css中animation属性，文字实现动画效果给大家看看。代码步骤1、首先使用htm...
2021-08-23
纯CSS3怎么创建瀑布流布局？columns方法浅析
我们提到CSS响应布局的，就会想要使用Grid和Flexbox来实现，其实它们也有一些局限性。像瀑布流布局这种，就无法用它们来简单实现。这其中的原因就是瀑布流一般来说都是宽度一致，但...
2021-08-23
手把手教你使用css给文字添加火焰效果（代码详解）
打开HTML代码软件，建立一个代码1、这儿来一个p标签，然后咱就随便写几个，开心就笑，累了就睡觉，醒了就微笑，代码示例。<html><head><meta charset="utf-8"><title></title></head><b...
2021-08-20
利用CSS3创建炫酷的三角背景图像
正如标题所言我们今天主要带大家了解使用CSS3创建炫酷的三角背景的方法，这在我们想展示某些完全不同的选择（例如白天和黑夜或冬天和夏天）时非常有用。下面我们就先直接上代码：<!...
2021-08-20
如何使用纯CSS3创建炫酷的图像放大效果？
鼠标悬停图片放大特效是一个非常有用且吸引眼球的特效，可以给网页添加互动性，当用户悬停鼠标在图片上，图片会稍微的放大。适用于图片展示页面，可以大大的提升用户的体验感！下面我...
2021-08-20
一招教你使用html给图片添加边框效果（代码详解）
图片添加边框效果的方法1、打开HTML代码软件，建立一个代码，添加图片效果有两种方法一方法：图片添加描边或者是给外面的盒子。二方法：就是直接在img图片标签。两项选一，我用是二方...
2021-08-19
用CSS快速创建高级模糊感的背景图像
废话不多说，开始正文！正如标题所言我们今天所要介绍的就是通过css来创建一个模糊的背景图像，适用于你个人博客页面，也适用于网站背景。下面我直接上代码：<!DOCTYPE html><html><h...
2021-08-19
手把手教你使用css制作一个圆角按钮效果（代码详解）
html制作一个网页中的圆角按钮的方法1、新建一个html文件，首先body中先输入一个a标签，并插入一个空链接。<a href="#">按钮</a>，然后在title中插入引入内嵌样式的代码<style ty...
2021-08-18
如何使用css设置背景图的重复与否
当我们有一张背景图的时候，如何设置这个背景图的平铺方式呢？先来看一个小栗子，就拿上篇文章的代码吧。<style> div{ background-image: url("images/3.jpg"); bac...
2021-08-17
一招教你使用css给HTML字体添加背景图（代码分享）
先看一下最终实现的效果如何在字体添加背景图？1、在html打开中，首先写div标签，在<body>和</body>中间，输入代码<div>时间也抛弃他</div>。代码示例<!DOCTYPE html><html><head><...
2021-08-17
css如何设置指定网格的大小和位置
之前我们去了一个如何去定义网格线的大小，这次来点不一样的。我们来看看一个小栗子。<style> article { display: grid; width: 300px; hei...
2021-08-17
如何实现炫酷的数字大屏
依托强大无远开发平台，可以快速实现带各种酷炫联动效果的数字化大屏。一起来看一下吧 DEMO 地址：https://previewer.wuyuan.io/p...配置地址：https://workbench.wuyuan.io/p......
2021-08-11
一步步教你使用CSS制作一个简单美观的导航栏（代码详解）
使用css制作页面的时候，想做一个简单美观的导航栏，怎么做呢，下面来分享一下方法。导航栏+链接列表导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素。代码示例<body><ul><...
2021-08-06
手把手教你使用css3给文字添加阴影效果（代码详解）
用css3给文字添加阴影效果代码示例<!DOCTYPE html><html><head><meta charset="utf-8"> <title>文字阴影</title> <style>h1{text-shadow: 7px 10px 6px #FF0145;}p{text-sh...
2021-08-06
详解CSS中的特指度和层叠问题
前言Q：如果多个规则匹配同一个元素，而且部分声明之间有冲突，那么我们如何知道哪个规则胜出呢？A：用户代理会计算每个规则中选择符的特指度，然后将其依附到规则中的每个声明上。如果...
2021-07-16
CSS3中Animation实现简单的手指点击动画的示例
本文主要介绍了CSS3中Animation实现简单的手指点击动画的示例，分享给大家，具体如下：效果图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name...
2021-07-16
纯CSS3实现div按照顺序出入效果
本文主要介绍了纯CSS3实现div按照顺序出入效果，具有一定的参考价值，感兴趣的可以了解一下效果：源代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>...
2021-07-16
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
CSS3.0(Cascading Style Sheet) 层叠级联样式表快速入门：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
2021-07-16
css样式冲突怎么办
1. 细化选择符通过使用组合器（Combinator）将选择器的描述写得更加精确，例如对于下述代码片段，如果想给.cellphones中的.apple增加样式，只使用.apple，势必会对.fruit中的.apple也造...
2021-07-15
纯CSS如何实现血轮眼+轮回眼特效（代码详解）
本篇文章给大家介绍一下使用纯CSS实现血轮眼+轮回眼特效的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。 效果（完整代码在底部）其实实现并不难，都是重复...
2021-07-15
怎么用css实现左右运动效果
在css中，可以利用“@keyframes”规则和animation属性来实现左右运动效果。代码示例：<!DOCTYPE html><html><head><meta charset="utf-8"> <style> div{ width:100px...
2021-07-15
纯CSS实现圆角三角形的3种方法（技巧分享）
本文将介绍几种实现带圆角的三角形的实现方式。法一. 全兼容的 SVG 大法想要生成一个带圆角的三角形，代码量最少、最好的方式是使用 SVG 生成。使用 SVG 的 多边形标签 <poly...
2021-07-15
css行内样式是内部样式吗
行内样式行内样式就是把 CSS 样式直接放在代码行内的标签中，一般都是放入标签的style属性中，由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式。【...
2021-07-15
css怎么设置元素透明度
CSS设置元素的透明度（不透明度）方法：使用CSS3 opacity 属性作用：设置元素的透明度语法：jsobject.style.opacity=valuecssopacity: value|inherit;参数: value：指定的透明度；范围从...
2021-07-15
css上边距怎么设置
css设置上边距的方法一：使用margin-top属性margin-top属性可以设置元素的上外边距围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。...
2021-07-15
css提供了几种复合选择器
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。在四种CSS基础选择器中总结过 CSS 的基...
2021-07-15
css中绝对定位什么意思
绝对定位（absolute）意思是：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没...
2021-07-15
css不区分大小写吗？
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。在HTML文件中，CSS是不...
2021-07-15
网页设计css样式代码大全，快来收藏吧！
一.文本设置1、font-size: 字号参数2、font-style: 字体格式3、font-weight: 字体粗细4、颜色属性color: 参数注意使用网页安全色二、超链接设置text-decoration: 参数主要...
2021-07-09
css字体溢出怎么隐藏
css中，可以利用overflow属性来实现字体溢出隐藏效果。下面通过代码示例来介绍一下overflow属性如何实现字体溢出隐藏<!DOCTYPE html><html><head><meta charset="utf-8"><sty...
2021-07-06
css中text-align什么意思
text-align是css中一个内置属性，用于指定元素文本的水平对齐方式。可以设置的属性值： 值 描述 left 把文本排列到左边。默认值：由浏览器决定。 right ...
2021-07-06
css中inline-block什么意思
block块级元素特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度...
2021-07-06
值得收藏的26个css面试题，增强你的CSS基础！
CSS是层叠样式表（ Cascading Style Sheets ）的缩写，是一种样式表语言，用于描述以 HTML 之类的标记语言编写的文档的布局。 它是用于设计Web页面的三剑客之一，另外两位浩客是HTML...
2021-07-06
CSS中什么是:placeholder-shown？如何工作？有什么用？
CSS :placeholder-shown伪类是专门用于确定元素是否显示占位符的对象，主要使用它来检查input内容是否为空。 本篇文章带大家了解一下:placeholder-shown伪类，详细介绍一下它是...
2021-07-06
css不起作用的原因是什么
在写页面时，有时会发现自己写的css样式无法生效，我们该如何排查css样式无法生效？常见的css样式不起作用的原因有哪些呢？下面我们就来看一下css样式不起作用的原因。排查css样式...
2021-07-06
css中伪类和伪对象（伪元素）区别是什么
其中伪类和伪元素（伪对象）的根本区别在于：它们是否创造了新的元素。伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存...
2021-07-06
css中px和pt的区别是什么
px和pt，一个是设备坐标，一个是逻辑坐标，两者是不同的。pt是个绝对单位，1 pt =1/72 英寸px是个相对单位，一般像素的参考值为：在一个像素密度是90 pdi的显示器上，正常人从距离显示器2...
2021-07-06
给元素设置圆角半径的css属性是什么
给元素设置圆角半径的css属性是border-radius。border-radius属性可以设置元素的外边框圆角；使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。语法：border-radius:...
2021-07-06
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
一. overflow:hidden 溢出隐藏给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。/*css样式*/<style type="...
2021-07-02
