CSS - 教程之家

152浏览

0评论

css定位position引发的层级关系问题详解

position定位里的absolute，relative和fixed absolue：绝对定位，用top,bottom,left和right根据有定位的父级元素进行定位，如果无则相对body元素即整个页面文档进行定位。 re...

2020-10-16

107浏览

0评论

css3实现圆锥渐变conic-gradient效果

语法：background-image: conic-gradient(from angle at position, start-color, ..., last-color )第一个参数：from angle ：起始的角度，可选，默认为从上到下position ：圆锥锥点的...

2020-10-16

79浏览

0评论

border-radius IE8兼容处理的方法

根据canisue（http://caniuse.com/#search=border-radius），border-radius兼容性如下图所示：测试代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <me...

2020-10-16

129浏览

0评论

css3针对移动端卡顿问题的解决(动画性能优化)

一、使用css，jquery，canvas制作动画1.Canvas优点：性能好，强大，支持多数浏览器（除了IE6、IE7、IE8），画出来的图形可以直接保存为 .png 或者 .jpg的图形；缺点：依赖于HTML，只能通过脚本绘...

2020-10-16

178浏览

0评论

在Firefox浏览器中利用CSS窃取数据

0x00 前言几个月之前，我在Firefox中找到了一个漏洞（ CVE-2019-17016 ）。在研究过程中，我发现了在Firefox浏览器中利用CSS的一种数据窃取技术，可以通过单个注入点窃取数据，这里我想...

2020-10-16

98浏览

0评论

纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白必看)

效果如下：实例1实例2以实例1【婚礼策划】为例HTML：<div class="itemInWorks" > 婚礼策划 <div class="mask"> 状态：待完成<br> 执行者：张三<br> 截止日期...

2020-10-16

68浏览

0评论

css中有序无序列表项list样式设置方法

在无序列表ul>li中，无线列表的标志是出现在各列表前面的圆点。在有序列表ol>li中，前面默认带有数字，如何修改列表前面的项目符号，只需要通过list-style调整就好，常见的符号有（/*内...

2020-10-16

87浏览

0评论

CSS网页响应式布局实现自动适配Pc/Pad/Phone设备

前言现在的设备很多，有PC、iPad、手机、智能手表、智能电视。如果没有响应式布局，那么电脑网页在手机或者ipad上显示，是体验非常差，操作不方便，视觉疲劳的，所以我们开发网页要做好...

2020-10-16

126浏览

0评论

通过CSS向JS传参的方法

一、需要通过CSS传参的背景CSS中有很多媒体查询的用法，例如设备尺寸判别，是否支持鼠标行为，是否是黑暗模式，是否是省电模式等。比方说最近经常提到的黑暗模式，深色主题：@media (pr...

2020-10-16

102浏览

0评论

css实现透明渐变特效的示例代码

知乎发现栏目上的标题图一般都是以下图方式展现的，很显然它是利用渐变去实现的。思路很有意思，主要是要有两方面的认知：这张图其实可以分成两部分，右边控制图形和渐变，左边就是一...

2020-10-16

172浏览

0评论

css实现div内凹角样式的示例代码

平常的开发中我们一般使用到圆角都是外凸的，即border-radius属性。而如果有内凹角的情况，我们一般的考虑实现方法有2种。一种是直接使用背景图片，一种是使用css。用到的属性则...

2020-10-16

74浏览

0评论

css常用样式font设置字体的多种变换(实例详解)

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）font-family控制字体，由于各个电脑系统安装的字体不尽相同，但是基本装有黑体、宋体与微软雅黑...

2020-10-16

140浏览

0评论

CSS3关于z-index不生效问题的解决

最近写CSS3和js结合，遇到了很多次z-index不生效的情况：1.在用z-index的时候，该元素没有定位（static定位除外）2.在有定位的情况下，该元素的z-index没有生效，是因为该元素的子元素后...

2020-10-16

127浏览

0评论

常见的浏览器兼容性问题(小结)

浏览器的兼容性无非还是样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面。样式兼容性（css）方面（1）因为历史原因，不同的浏览器样式存在差异，可以通过 Normalize.css 抹平...

2020-10-16

189浏览

0评论

CSS完美解决前端图片变形问题的方法

在头条IT学堂看到CSS完美解决前端图片变形问题的文章，就记录分享下：一、让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中：<style type="text/css">div{...

2020-10-16

140浏览

0评论

CSS控制网页背景颜色的代码

我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧，这个我想也是有的，因为这些图片不是太大就是太小，或者太乱，那么有没有办法让图片能合自己的主页的胃口呢？答案是肯定...

2020-10-16

102浏览

0评论

CSS 实现侧滑显示留言面板的网页组件功能

大家好，不知道你们是否和我一样存在这样的困惑呢，虽然css入门容易，但是其内容太多，好多属性看了似是而非，觉得自己看懂了，到自己用的时候又很犯难了，看到漂亮的效果还是无从下手，这...

2020-10-16

115浏览

0评论

CSS实现ul和li横向排列的两种方法

因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：float:left
这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没...

2020-10-16

139浏览

0评论

css浮动 float属性详解

一、什么是浮动？浮动，顾名思义，就是漂浮的意思。指的是一个元素脱离文档流，悬浮在父元素之上的现象。二、如何产生浮动？给元素本身添加float属性float值：...

2020-10-16

125浏览

0评论

CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现

例子：<html><head><style type="text/css">ul.none{list-style-type:none}ul.circle {list-style-type:circle}ul.square {list-style-type:square}ol.upper-roman {list-sty...

2020-10-16

85浏览

0评论

面试官提问之CSS如何实现固定宽高比

对于这个问题，你可能还没有过相关需求，或者还没有在面试的时候被问到过，但是歪马相信你终将有需要。这个问题说起来也是老生常谈，歪马今天再次提起也是希望有朝一日当你被问到的...

2020-10-16

97浏览

0评论

CSS3标注引用的出处和来源的方法

疫情呆家里都快发霉了，打开电脑动动大脑，今天给大家分享一篇关于CSS3标注引用的出处和来源的方法。新技术的出现往往意味着新的生产力的提高。随着HTML5和CSS3的流行和普及，越...

2020-10-16

61浏览

0评论

CSS中元素的显示模式

在CSS中，根据元素显示模式的不同元素标签被分为了两类:行内元素（inline-level）、块级元素（block-level）。1，首先介绍什么是行内元素，什么又是块级元素？　　　　　　1.1，行内元素就是...

2020-10-16

141浏览

0评论

快速解决css使用@keyframes加载图片首次循环时出现白色间隙问题(闪屏)

问题解说:在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题问题演示 //html <div class="contain...

2020-10-16

219浏览

0评论

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码

作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到“使用css居中”的效果，今天就写一篇关于css垂直水平居中的几种方法。栗子1：从最简单的水平...

2020-10-16

128浏览

0评论

解决移动端1px边框问题的几种方法(5种)

本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。物理像素、设备独立像素和设备像...

2020-10-16

137浏览

0评论

CSS3实现文字浮雕效果，镂刻效果，火焰文字

要做出这个效果，首先必须知道css的一个属性：text-shadow:水平位置垂直距离模糊距离阴影颜色;水平位置和垂直位置的值可以为负值可以使用两组值来实现凹凸效果，中间用逗号&ld...

2020-10-16

132浏览

0评论

css样式层叠规则详解

CSS样式规则语法样式是CSS的基本单位，每个样式规则都是由选择器和声明块两个基本部分组成的。选择器（selector）决定为哪些元素应用样式；声明块定义相应的样式，它包含在一对花括号...

2020-10-16

151浏览

0评论

解决CSS浏览器兼容性问题的4种方案

前端是一个苦逼的职业，不仅因为技术更新快，而且要会的东西实在太多了，更让人头疼的是，还要面临各种适配、兼容性问题。为什么会有浏览器兼容性问题？还不是因为浏览器厂商太多了！Ch...

2020-10-16

86浏览

0评论

css sticky footer经典布局的实现

什么是sticky footer布局？我们常见的网页布局方式一般分为header（页头）部分,content（内容区）部分和footer（页脚）部分。当页头区和内容区的内容较少时，页脚区不是随着内容区排布而是...

2020-10-16

94浏览

0评论

css实现两列固定与一列自适应的几种方法

本文介绍了css实现两列固定与一列自适应的几种方法，分享给大家，具体如下：1.flex布局Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提...

2020-10-16

96浏览

0评论

border-radius给元素添加圆角边框的方法

border-radius:10px; /* 所有角都使用半径为10px的圆角 */border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */不要以为border-r...

2020-10-16

156浏览

0评论

CSS实现QQ浏览器功能

代码知识点1.结合fullpage.js实现全屏滚动2.CSS中linear-gradient() 函数用于创建一个线性渐变的 “图像”。 background-image: linear-gradient(direction, c...

QQ

2020-10-16

65浏览

0评论

js判断并告知支持css属性（值）的情况分析

当我们想用某个css新特性时，总是会在意它的兼容性情况，或许我们会去搜索它的兼容性，哪些浏览器合适哪些不合适，在这些已知的情况下再选择是不是使用或如何使用，这是一个已知我们...

2020-10-16

176浏览

0评论

CSS 实现蜂巢/六边形图集的示例代码

不知道为什么，UI 很喜欢设计蜂巢效果（摊手）一、实现六边形首先用传统的方式来分析一下六边形可以拆分成三个矩形，每个矩形旋转正负 60° 得到其它两个矩形由此可以设计出基...

2020-10-16

221浏览

0评论

CSS3颜色值RGBA与渐变色使用介绍

CSS3之前渐变色图片只能用背景图片
CSS3的渐变色语法可以让我们省去下载图片的开销
并且在改变浏览器分辨率时有更好的效果颜色值RGBA我们熟悉的rgb颜色标准，是由r（red）、g（gree...

2020-10-16

131浏览

0评论

css实现多张图片横向居中显示的方法

先讲一下实现的步骤：最终效果2. 代码实现HTML部分 <div class="main"> <div class="tag"> 分类小贴士 </div> <div class="images" > <div class="mid"> <img sr...

2020-10-16

103浏览

0评论

css3 transform导致子元素固定定位变成绝对定位的方法

本文介绍了css3 transform导致子元素固定定位变成绝对定位的方法，分享给大家，也给我自己留个笔记，方便查找。<!DOCTYPE html><html><head><style> body { background: #f...

2020-10-16

101浏览

0评论

css如何利用负margin技术实现平均布局

我们平常会利用float布局来解决IE浏览器CSS的兼容性问题，比如淘宝，就是用float布局来实现的。我们会在淘宝页面会看到下图这样一种布局。这种图片均匀分布的布局我们叫平均布...

2020-10-16

205浏览

0评论

CSS实现带遮罩层可关闭的弹窗效果

实际开发中常常少不了使用弹窗，在学习css3的时候我发现可以通过纯css实现带遮罩层可关闭的弹窗。使用CSS3实现带遮罩层可关闭的弹窗需要用到 :target伪类，::before 、::after...

2020-10-16

99浏览

0评论

利用CSS3的3D效果制作正方体

学会用CSS3的3D效果制作一个正方体，有助于增强我们对3D场景的旋转和位移属性的理解。下面的动态图就是利用3D旋转位移，结合动画效果制作的。感兴趣的同学可以在完成正方体的制...

2020-10-16

72浏览

0评论

CSS实现两栏布局，左边固定，右边自适应的4种方法

1. float+overflow:hidden这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置...

2020-10-16

61浏览

0评论

通过css动画实现一个表格滚动轮播效果

css动画的一个应用，与此前的css走马灯同样的内容。只是一次不同的应用，具体实现如下<template> <section> <div class="box"> <ul class="header"> <li class...

2020-10-16

179浏览

0评论

巧用CSS属性值正则匹配选择器(小技巧)

属性值正则匹配选择器包括下面3种： [attr^="val"] [attr$="val"] [attr*="val"]这3种属性选择器是字符匹配，而非单词匹配。其中，尖角符号^、美元符号$以及星号*都是正...

2020-10-16

122浏览

0评论

CSS选择器中的正则表达式使用

一是的，CSS也有正则（阿门）CSS装逼两利器：矩阵和正则。其实呢，我们也不必惊讶，CSS毕竟也是一门语言，而且正则本来就是有利于某个具体语言之外的东西。二正则表达式的一些通用规则...

2020-10-16

67浏览

0评论

CSS中的 position属性sticky详解

在开发移动端app时，经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候，让一部分内容作为navbar，也就是置顶显示，我们一般会使用js监听scroll事件来实现，但是...

2020-10-16

121浏览

0评论

css实现抖音订阅按钮动画效果

前段时间刷抖音，觉得关注时的按钮动画很好看，加上自己本身最近也在学习前端知识。所以就想怎么自己实现出来，最终效果还可以，但是感觉自己做的还不够好。仅供参考。🍻最...

抖音

2020-10-16

91浏览

0评论

CSS 返回顶部代码示例

现在的网站基本上都是长页面，多的有四五屏，少的话也有两三屏，页面太长有的时候为了提升用户体验，会在页面右边出现一个回到顶部的按钮，这样能快速回到顶部，以免在滑动页面出现视觉...

2020-10-16

119浏览

0评论

用css3实现转换过渡和动画效果

为什么要用css动画替换js动画导致JavaScript效率低的两大原因：操作DOM和使用页面动画。通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果，导致js效率低的两个因素...

2020-10-16

59浏览

0评论

css overflow: hidden 的用法(溢出隐藏及清除浮动)

溢出隐藏就是隐藏超出规定高度的文本或者图像信息。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> di...

2020-10-16

热门文章