CSS变量对JS交互组件开发带来的提升与变革示例代码详解
一、CSS变量带来的质变CSS变量带来的提升绝不仅仅是节约点CSS代码，以及降低CSS开发和维护成本。更重要的是，把组件中众多的交互开发从原来的JS转移到了CSS代码中，让组件代码更...
2020-10-16
css布局两个button在同父标签中左右两侧分布的方法
本文主要介绍了css布局两个button在同父标签中左右两侧分布的方法，分享给大家，具体如下：效果图布局代码<view class="grace-footer" style="width:100%;" slot="gFooter"> <vie...
2020-10-16
CSS垂直居中的另类实现代码详解(不走寻常路)
前言众所周知，“css如何实现元素垂直居中？”已经是一个老生常谈的问题了，这个问题目前已经有了许多解决方案，这些方案也都有各自适用的场景以及优缺点，大致如下： fle...
2020-10-16
CSS3里box-shadow属性的使用方法示例详解
CSS里面的属性很多，有些属性长时间不用，就容易忘，尤其是那种需要设置多个值的属性。比如：box-shadow，每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用，都要查阅资料才能实...
2020-10-16
CSS 中使用径向渐变实现卡券效果
前几天，同事接到一个积分商城项目，其中有一个卡券兑换礼品功能。我想了一会没什么好的思路，就忙自己的项目去了。但想到以后自己可能也会遇到类似的需求，所以周末学习整理了下几...
2020-10-16
解决CSS样式冲突的几个办法(小结)
1. 细化选择符通过使用组合器（Combinator）将选择器的描述写得更加精确（参考CSS选择器 - MDN ），例如对于下述代码片段，如果想给.cellphones中的.apple增加样式，只使用.apple，势必会...
2020-10-16
如何使用HTML+CSS实现TG-vision 主页制作
本次我们用HTML+CSS布局来对TG-vision 双晖传媒的主页进行一个初步的搭建。一.顶部logo及导航条1.HTML代码<!--顶部开始--><div class="topheader"> <!--双晖logo-->...
2020-10-16
使用CSS cross-fade()实现背景图像半透明效果的示例代码
一、需求描述某元素，希望 background-image 背景图片是半透明的，但是，元素里面的其他内容，例如文字，图标之类的还是不透明。如果是纯色背景或者是CSS渐变背景，很好处理，使用 rgba...
2020-10-16
css3实现小箭头各种图形效果
css实现各种图形真是太赞了，再也不用切图了，直接用css就可以实现。最常用的就是用css实现的小三角了#triangle-up{ display:inline-block; width:0; height:0; border-left:30...
2020-10-16
CSS让子容器超出父元素(子容器悬浮在父容器效果)
前言有时候，我们需要如下图这样一个悬浮效果需求：实现在标准的正常的情况下，只能使用 绝对定位 来完成。第一步：父容器定位设置为 relative（相对定位）。第二步：子容器定位设置为 ab...
2020-10-16
div自适应高度自动填充剩余高度
方案1：Html：<div class="outer"> <div class="A"> 头部DIV </div> <div class="B">下部DIV </div></div>CSS： html,body { height: 100%; padding: 0; margin: 0; }.oute...
2020-10-16
css实现图片自适应容器的几种方式(小结)
经常有这样一个场景，需要让图片自适应容器的大小。1、img标签的方式我们马上就能想到，把width、height 设置为100%啊。来看一哈效果。<div class='div1'> <img src="./peiq...
2020-10-16
CSS 实现 10 种现代布局的代码
前言周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西...
2020-10-16
CSS届的绘图板CSS Paint API简介
一、把Canvas图片作为CSS背景图片CSS Paint API可以简单理解为（实际不能等同）把Canvas画布作为普通元素的背景图片。也就是CSS的background-image就是一个Canvas，我们可以利用C...
2020-10-15
使用 CSS Paint API 动态创建与分辨率无关的可变背景效果
来源：https://medium.com/better-programming，作者：Ferenc Almasi现代Web应用对图像的需求量很大，它们占据网络下载的大部分字节。通过优化它们，你可以更好地利用它们的性能。如...
2020-10-15
CSS设置盒子容器(div)高度(height)始终为100%
前言
有时需要让一个盒子容器的 高度始终保持100%，无论怎么缩放浏览器高度始终不变。就像一些网站的侧边栏，但直接设置盒子容器的高度为100%是不起作用的。demo如果想让一个元...
2020-10-15
CSS使用calc()获取当前可视屏幕高度的实现
先了解一下CSS3的相对长度单位(参考详细教程) ：相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 em...
2020-10-15
CSS中引用svg图片支持动态切换颜色的实现代码
当我们添加一张svg图片显示时，react提示找不到文件。我们可以在全局文件global.d.ts内，添加图片类型的声明：详见《TypeScript 引用资源文件后提示找不到的错误处理方案》声明之...
2020-10-15
css高度随宽度比例变化的几种实现方法
【方案一：padding实现】原理：一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，padding-bottom 也是如此。使用 padding-bottom 来代替 height...
2020-10-15
CSS中@用法小结(示例详解)
at-rule是一个声明，为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字，这个关键字充当一个标识符，用于表示CSS该做什么。这是一个通用的语法，尽管每个at-...
2020-10-15
纯CSS3实现鼠标滑过按钮动画第二节
有了之前的两章，小伙伴们对按钮悬浮动画是否又有了新的认识呢？前面两章主要是从背景着手，而本章主要是围绕边框动画做效果。并且，本章节（按钮组:有趣的CSS按钮动画，带你进入CSS世...
2020-10-15
纯CSS实现自定义单选框和复选框功能
1 实现效果2 知识点讲解2.1 <label>标签在html中，<label>标签通常和<input>标签一起使用，<label>标签为input元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果，<label>...
2020-10-15
纯CSS实现iOS风格打开关闭选择框功能
1 效果演示地址： https://www.albertyy.com/2020/7/check2.html 另一篇文章：https://www.freexyz.cn/css/735639.html2 知识点2.1 <label>标签在html中，<label>标签通常和<input>...
2020-10-15
纯Css实现Div高度根据自适应宽度（百分比）调整
在如今响应式布局的要求下，很多能自动调整尺寸的元素能够做到高宽自适应，如img，通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整。然而，用的最多的标签一哥Div却不能...
2020-10-15
使用css写带纹理渐变背景图的示例代码
项目中页面长度大概在2000px以上，再加上背景图是带纹理和渐变的，所以加载起来会很大很耗费时间，所以就改用css实现了。这次我们主要用到的网站是Hero Patterns——免...
2020-10-15
解决flex布局space-between最后一行左对齐的方法
首先看代码和效果↓<style> .main { outline: 1px solid; display: flex; justify-content: space-between; flex...
2020-10-15
flex布局实现无缝滚动的示例代码
本文主要介绍了flex布局实现无缝滚动的示例代码，分享给大家，具体如下：案例的演示flex布局所谓flex布局就是弹性盒布局,这种布局在移动端比较常用，但随着浏览器的版本更新，flex布...
2020-10-15
CSS 伪类修改input选中样式的示例代码
注：该表引自W3School教程伪元素的分类及作用：下面通过代码看下CSS 伪类修改input选中样式的示例代码，代码如下所示：主要是用到了after伪类和字体符号。input{ -webkit-appear...
2020-10-15
CSS 控制动画播放与暂停的小技巧(非常实用)
今天要介绍一种很简单的使用 CSS 控制动画播放与暂停的小技巧。 使用好了，可以在很多实际场景得以运用。我们先来看个例子，本例子是我在闲逛 Codepen 时看到了，很有意思：本例子，C...
2020-10-15
flex布局换行空白间隙之align-content的使用
一、本文实现的效果图如下：布局右侧使用flex布局，超过3个则换行。父元素代码如下：.nav-right{ width: 75%; padding: 10px; display: flex; /* 默认是水平的 */ flex-dire...
2020-10-15
flex布局实现上下固定中间滑动的布局方式
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下:例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。简单介绍一下如何实现固定...
2020-10-15
css3 flex布局实现平均分配元素的示例代码
本文主要介绍了css3 flex布局实现平均分配元素，给自己留个笔记，也分享给大家，具体如下：例子一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex...
2020-10-15
CSS字体、文本、列表属性详细介绍
1.字体属性 color，规定文本的颜色，如 div{color:red;} font-style，规定文本显示方式，如 p.normal {font-style: normal;} ，有normal（正常显示）、italic（斜体显示，字体结构有一...
2020-10-15
深入理解CSS background-blend-mode的作用机制
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、可能都知道的首先，讲两点大家可能都知道的知识点：1.background-blend-mode 本身就带有隔离...
2020-10-15
CSS中的四种定位区别详解
我们都知道，前端开发里面的CSS中常用的定位方式有普通定位，相对定位，绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和区别，在使...
2020-10-15
解决移动端1px边框最好的方法(推荐)
在移动端开发时，经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。1px 边框问题的由来苹果 iPhone4 首...
2020-10-15
让CSS flex布局最后一行列表左对齐的N种方法(小结)
引用张鑫旭的一篇文章分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。问题描述//html<div class="container"> <div class="list"></div>...
2020-10-15
CSS 列表模型之marker标记的使用
本文主要对::master伪元素、list-item下的list-style-image、list-style-type样式属性进行介绍，并介绍了在实际中如何使用。list-item下还有其他不常用的样式属性这里不做介...
2020-10-15
css counter计数器与content总结
content属性早在css2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。content属性现在已经得到大部分浏览器的支持，关于content属性的支持情况可以在canius...
2020-10-15
利用transform实现一个纯CSS弹出菜单的示例代码
前言在制作顶部菜单的时候，都会要求制作弹出的二级菜单，早先的做法是用jQuery的来控制二级菜单的显示和过渡动画，但利用CSS3中的transform属性后，这一切都变得异常简单先上效果...
2020-10-15
详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
CSS引入方式-行内式通过 style这个标签属性,将css键值对直接写入标签内<p style="width: 100px;height: 100px;background: red;"></p> <!--注释:这段代码描述的是一个宽高...
2020-10-15
CSS 容器背景 10 种颜色渐变Demo（linear-gradient()）
语法background: linear-gradient(direction,color-stop1,color-stop2,...); direction：用角度值指定渐变的方向（或角度）。 color-stop1,color-stop2,...：用于指定渐变的...
2020-10-15
纯CSS3+DIV实现小三角形边框效果的示例代码
具体代码如下所示：html代码是这样的<div class="arrow-up"> <!--向上的三角--></div><div class="arrow-down"> <!--向下的三角--></div><div class="arrow-left">...
2020-10-15
Flex布局让子项保持自身高度的实现
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。
这是因为Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容...
2020-10-15
Flex布局实现div内部子元素垂直居中的示例
1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear...
2020-10-15
详解flex布局与position:absolute/fixed的冲突问题
之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下：项目实战：我们现在想做一个头部的导...
2020-10-15
CSS3 input框的实现代码类似Google登录的动画效果
用css3将input框写出类似Google登录页面的动画效果效果一代码如下CSSbody{ background-color:#acacac; } .form-container{ display: block; position: relativ...
2020-10-15
详解flex布局下图片变形的解决方法
flex布局是现在常用的一个布局方式，但是有时候也会导致出现一些小问题。本人在使用flex布局做一个左边头像，右边文字的时候，发现固定图片的宽度时，图片宽度仍然发生了变化。下图...
2020-10-15
使用Flex布局实现头部固定内容区域滚动的方法
页面头部固定布局以前用 position:fixed实现，如今可以用flex布局实现，快捷方便。Flex布局好处：1.不破坏html文档流 2.兼容性更好。display: flex 和 display: -webkit-box 仅是...
2020-10-15
CSS中的两个特殊值用于控制层叠的inherit和initial的方法
在CSS中有两个特殊值可以赋给任意属性，用于控制层叠：inherit和initial。我们来看看这两个特殊值。使用inherit关键字有时，我们想用继承代替一个层叠值。这时候可以用 inherit...
2020-10-15
