很多网页的导航条都会有小三角形，其实实现这个功能也挺简单。 拿菜鸟教程首页导航做个例子 首先写一个大的div_nav，而首页菜鸟笔记菜鸟工具参考手册等则作为div包含在div_nav中。...

在很多项目中，需要实现分格展示的功能，中间有灰色分割线，两侧没有。 如图： 按照一般的思路，设置好li的宽度，通过nth-of-type(n){}的方式给li标签添加样式。 设置每个li 33.33%的宽...

在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参...

使用css修改浏览器滚动条样式 ::-webkit-scrollbar { width: .5rem; height: .5rem; background: hsla(0, 0%, 100%, 0.6);}::-webkit-scrollbar-track { border-radius: 0;}::-webkit-scrollbar-thumb { border-radius: 0; back【文章来源：新...

本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和IE浏览器中，自定义一个横向以及一个纵向的滚动条。 0.需求 有的时候我们不想使用浏览器默认的滚动条样式，因为...

用padding-top百分比可以实现宽度固定高度按比例展示，现在的需求是对一个video视频的盒子div高度是固定的，宽度如何按比例展示？ 解决后效果如图： 红框标注的即是我在上面高度比例...

有时候我们的页面会需要这样的一些提示框或者叫气泡框，运用css，我们可以实现这样的效果。 为了实现上面的效果，我们首先要理解如何制作三角形。 当我们给一个DIV不同颜色的边...

关于css中line-height(行高)设置无效的问题 我们先写下这一串代码： !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleDocument/titlestyle type=text/css.head{height: 100px;text-align: center;line-height: 100px;/* 设置行...

1、利用绝对定位和m【本文由：防cc 提供，感恩】argin 此方法的原理说将左右两侧进行定位，让其脱离文档流。 中心区域自然流动到它们下面，再为其设置margin值 此方法页面元素结构可...

本文介绍了CSS Sticky Footer实现代码，分享给大家，具体如下： 上图所显示的效果就是sticky Footer，当页面主题内容不够长时，footer定位在窗口的底部，当页面主题内容超出窗口后，foote...

效果图： html： div class='site_bar'首页/divcss:.site_bar{ background-image : linear-gradient(red,red); background-position : center bottom; background-size : 0 2px; background-repeat : no-repeat; //这个属性不能少。 transitio...

今天我们介绍几种，用css实现左上朝向三角形（Top-Left Triangle）的写法。 示意图（以宽高各60px为例）： 这种三角形，一般可以用来做对话框类型图形的左下小脚。 第一种： #triangle-t...

float:left/right/none; 1.同级浮动 （1）使块级元素在同一行显示（所有要在同一行显示的都要加浮动） div class=box1box1/divdiv class=box2box2/divdiv class=box3box3/div.box1{border: 2px solid red;width: 40px;heig...

一、三角形 border边框设置 代码： width: 300px;height: 300px;background: red;border: 40px solid black;border-left-color: blue;border-bottom-color: yellow;border-right-color: pink;border-top-color: #008800; 花特殊图形的时候需...

BEM是基于组件的web开发方法。其思想是将用户界面分隔为独立的块，从而使开发复杂的UI界面变得更简单和快，且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择...

用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了，自己不需要做什么改动就会自动加前缀： 下面一起看看涉及到autoprefixer这个插件的一些配置： 1，postcss配置写在.postcssrc...

本文介绍了css实现文字居中两边横线效果的示例代码，分享给大家，具体笔记如下： 效果： !doctype htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, user-scalable=no, init...

基本介绍 特点 flexbox是一种css display类型，提供一种更简单高效的布局方式； flexbox可以对元素相对于父元素、兄弟元素进行定位、控制尺寸、控制间距； flexbox对响应式有很好的支持；...

基本介绍 上一篇文章我们介绍了css3 flexbox，今天我们再来说说css3的另外一个强大的功能：Grid。 Grid做前端的同学应该都很熟悉了，翻译成中文为栅格，用过bootstrap、semantic ui、ant desi...

效果原理 主要利用css渐变实现一些不需要切图的背景镂空 优惠券样式 .mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) { width: @width; height: @height; background: radial-gradient(circle at top right, tran...

简介 Animation可以让你不用依赖javascript或jquery，用纯CSS在网页中轻松实现各种动画效果。 兼容性 animation在绝大部分主流浏览器都得到了很好的支持！还在兼容IE9的同学要谨慎使用。 C...

表现 例如： HTML： div class=first div class=first-child1first-child1/div div class=first-child2first-child2/div/divdiv class=second second/divdiv class=third third/div CSS： .first{ width: 300px; background-color: pink;}.first .firs...

几个概念 line box：包裹 inline box 的一个盒子，一个或多个 line box 堆叠撑起一个 HTML 元素。 inline(-level) box：可以是一个由行内元素包裹的盒子，也可以是一个纯文字的匿名盒子。 conten...

分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。 演示地址：https:...

为什么会卡顿？ 有一个前提必须要提，前端开发者们都知道，浏览器是单线程运行的。但是我们要明确以下几个概念：单线程，主线程和合成线程。 虽然说浏览器执行js是单线程执行（...

注：该方法只适用于 -webkit- 内核浏览器 浏览器滚动条太宽，太丑，影响日常开发怎么办，改TA 滚动条外观由2部分组成：1.滚动条整体滑轨 2.滚动条滑轨内滑块 在CSS中滚动条由3部分组成...

我们需要达到的效果： 需要什么 1张图片的， 2张图片的， 3张图片的样式各不相同。可以使用js完成子元素的判断，但是这里我使用css来完成 核心知识点 使用css选择器完成子元素的判...

当我们在写页面时经常会遇到页面内容少的时候，footer会戳在页面中间或什么？反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部， 方法...

css的模块化方案可能和js的一样多，下面简单介绍几种主要的模块方案。 oocss 面对对象的规则，主要的原则是两种：分离结构和外观，分离容器和内容。 名词解释 分离结构和外观：增...

大概有多久没有更新专栏文章了。半年？下半年忙到起飞，或者毫不夸张的说是发射？仅有的一点个人时间，上半年贡献给了Python，现在差不多已忘掉了七七八八（一首《凉凉》送给自...

本文讲的等高布局是在不手动设置元素高度的情况下，使用纯css实现各个元素高度都相当的效果。如图： 1、使用table-cell实现(兼容IE8) style body,div,ul,li{margin: 0;padding: 0;} li{list-style: none...

当Web项目变得越来越大时，他的CSS会变得像天文数字那么大而且还变得混乱。为了帮助我们解决这个问题，新的CSS变量很快就会出现在主流浏览器中，它让开发人员能够重用并轻松编辑...

本文介绍了css3实现元素环绕中心点布局的方法示例，分享给大家，具体如下： 效果如图： 代码实现： style *{ margin: 0; padding: 0; box-sizing: border-box; } .surround-box, .center-point{ position: absolu...

本文介绍了css3实现3D文本悬停改变效果的示例代码，分享给大家，具体如下： html h1 class=hover-text-3d data-text=w3cbest.comW3CBEST.COM/h1 css .hover-text-3d { font-size: 7em;}.hover-text-3d { position: absolute;...

作为前端开发人员的必修课，CSS3能带我们完成许多基本动效，本期我们将用CSS3实现hover翻转效果~ 第一步非常简单，我们简单画1个演示方块，为其 添加transition和transform属性 ： // 本示...

html：其实就是根据table标签把几个实心圆div进行等边六角形的排布，并放入一个div容器中，然后利用CSS3的循环旋转的动画效果对最外层的div容器进行自转实现，当然不要忘了把div容器的...

在我们的日常业务中，表单验证是个很常见设计需求，像一些登录注册框，问卷调查也都需要用到表单验证。 一般我们的实现思路都是JS监听input框的输入内容，判断用户输入内容，从...

本文讲的等宽布局是在不手动设置元素宽度的情况下，使用纯css实现各个元素宽度都相当的效果。 1、使用table-cell实现(兼容ie8) style body,div{ mar【文章原创作者：http://www.yidunidc.com/st.ht...

想要实现一个左侧文字可以根据文字长短自动调整宽度，当一行显示不下时，不挤压右侧文字空间，左侧文字溢出省略。同理当右侧文字变长的时候，右侧文字全显示，左侧文字被挤压...

可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。 为了完成本次测试，先来...

content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符，其实它还有很多值可供选择。 1、插入纯字符 style *{margin: 0;padd...

通过将当前滚动偏移量添加到到 html 元素的属性上，我们可以根据当前滚动位置设置页面上的元素样式。我们可以使用它来构建一个浮动在页面顶部的导航组件。 这是我们将使用的 H...

近来研究了一下镂空效果。 background-clip: text 背景被裁剪为文字的前景色。第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上，这个玩意用得到处都是。 这样，做简单的图片背景...

关于CSS的发展史这里不做介绍。写博客的原因之一是想帮助那些与我一样喜欢纠结的初入前端的伙伴，希望自己写的帖子能对伙伴有些许帮助；原因之二这些帖子也算自己的一个知识的...

经常有这样一个场景，需要让图片自适应容器的大小。 1、img标签的方式 我们马上就能想到，把width、height 设置为100%啊。来看一哈效果。 div class='div1' img src=./peiqi.png alt=/div .div1 { widt...

本文主要介绍字体加载优化的常用策略，大部分内容为引用和翻译。 一、 font-face基本用法 font-face的基本用法想必大家都是知道的，基本上就是类似这样： @font-face {font-family: Lato;src:...

我爱撸码，撸码使我感到快乐！ 大家好，我是Counter，本章微博主要利用了CSS3的一些新特性， 主要用到关键帧来使3D图形运动起来，涉及到了一些抽象的思想，立体的想象。 先给大家看...

很多人从使用Scss的那一刻起，就被别人告诉了如何编译。所以，基本上也就只会一种命令编译方式。其实Scss提供了4种风格输出CSS，以满足更多人的需求。不同的输出方式如下： 嵌套输...

盒模型的组成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有两种标准的，一个是标准模型，一个是IE模型。 从上面两图不难看出在标准模型中，盒模型的宽高只是内容（...

Grid 是一个基于二维网格布局的系统，有了它我们可以非常方便的实现过去很复杂布局，无需再使用 float , inline-block , position 这些本质上是 hack 的方法。 CSS网格布局擅长于将一个页面划...