細水、長流√的专栏

今天的这个卡片边框动画效果，主要应用在一些重要信息上，想引起用户注意的时候，我们才会增加这样的效果，一般情况不会添加这样的动效，但是，我们还是需要学会怎么实现它，现在我们就一起来看看这个项目的最终效果：HTML代码：CSS代码：二、css实现边框动画效果如图：转载于：【每日一练】34—CSS 实现边框动画效果http://www.noobyard.com/article/p-eapbpcha-de.htmlcss3线条动画特效用纯CSS3制作的效果非常炫酷的元素边框线条动画特效电脑关

flex布局下超出隐藏显示省略号失败_flex布局超出隐藏显示点点

在CSS中很多隐藏元素的方法，但这些方法的可访问性、布局、动画、性能和事件处理的方式有所不同。

简介兼容性基本语法语法详解基本图形：inset基本图形：circle基本图形：ellipse基本图形：polygon使用示例圆形裁剪椭圆裁剪矩形裁剪多边形裁剪三角形菱形梯形平行四边形五边形六边形七边形八边形特殊图形裁剪斜角槽口左箭头右箭头星星十字架叉号对话框变形clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切clip属性。

定义：clip-path: inset(, ,,, ），括号内的值类似于margin、padding值的写法，可以写一个值，也可以写多个值。3.　ellipse；

如何实现下面这个渐变的边框效果：这个问题本身不难，实现的方法也有一些，主要是有一些细节需要注意。

首先给一个div设置渐变背景颜色，然后设置一个padding值（padding的大小就是原本边框的大小）；已知，border-image可以给边框设置渐变效果，border-radius可以设置圆角。然后在里面添加一个子div，背景颜色设置成白色，border-radius设置和外层一样即可。布吉岛为什么，写了border-image之后，我的border-radius就无效了！2）设置div的圆角（8px），设置背景颜色渐变，设置一个padding值。不用border-image也可以解决的思路！

对于元素的边框我们除了可以使用《》一节中介绍的一些默认样式外，还可以通过 CSS3 中的 border-image 属性使用图像来作为元素的边框，以创建出丰富多彩边框效果。border-image 属性可以通过一些简单的规则，将一副图像划分为 9 个单独的部分，浏览器会自动使用相应的部分来替换边框的默认样式。

css设置字体颜色渐变的方法：1、使用“background-cli”和“text-fill-color”实现字体颜色渐变；在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。webkit-text-fill-color: transparent 使用透明颜色填充文本。在SVG中，有两种主要的渐变类型。

【代码】css自定义虚线（可设置虚线间隔）模拟虚线。

想要在你的网站有一个好看的渐变背景吗？background-image:linear-gradient(red,blue)，就能很轻易的实现一个red至blue的渐变背景图片。就是这么的简单。感觉老话重提，有点无聊。如果您想了解更多这方面的知识，建议你阅读以前整理过的相关文章。我也推荐css-tricks和MDN上的相关文章。还在这里吗？好了，让我们看一些linear-gradient实际上工作的一些细节，从而更好的理解它是如何工作的。首先了解linear-gradient的语法：linear

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。Square(正方形)#square { width: 100px; height: 100px; background: red;}Rectangle(矩形)#rectangle { width: 200px; height: 100px; bac

CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。 这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形，十二角形。 网页代码中用到...

perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。上面的描述可能让人难以理解一些，其实对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就

一、HTML transform和SVG transformSVG中自带transform属性，没错，是属性，例如：<svg width="200" height="150"> <rect x="30" y="30" width="120" height="90" transform="rotate(45)"></rect></svg>普通的HTML元素没有transform属性，但是支持CSS3的transform, 好奇的小伙伴可能

　　MDN上对于linear-gradient的定义如下：　　CSSlinear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。　　在css中渐变就是background的background-image，也就是说，使用背景图像的css属性都适合渐变。下边我重点记录下渐变角度。　　图片来自于：https://developer.mozilla.org/en-..

一、哥，我被你吓住了打架的时候会被块头大的吓住，学习的时候会被奇怪名字吓住（如“拉普拉斯不等式”）。这与情感化设计本质一致：界面设计好会让人觉得这个软件好用！所以，当看到上面“Matrix(矩阵)”的时候，难免会心生畏惧（即使你已经学过），正常心理。实际上，这玩意确实有点复杂。然而，这却是屌丝逆袭的一个好机会。CSS同行间：你是不是有这样的感觉：哎呀呀，每天就是对着设计图切页面，貌似技术没有得到实质性地提升啊，或者觉得日后高度有限！我们应该都知道二八法则(巴莱多定律)，即任何一组东西中

一、滚动锚定是什么？大家可能有过这样的浏览体验，就是图片很多的时候，例如漫画网站，尤其是条漫，在手机端，垂直布局这种，如果上方的图片加载慢，那么下方的图片看着看着就会被推下来，然后自己又要重新去滚动定位。这是一个不太友好的浏览器体验行为。于是，Chrome 56（2017年）和Firefox 66（2019年）开始最浏览器原来的这些滚动行为进行了优化，实现了一种“滚动锚定”的交互行为。具体描述为：当前视区上面的内容突然出现的时候，浏览器自动改变滚动高度，让视区窗口区域内容固定，就像滚动效果被

html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; } //来源于百度百科样式.

css3中的自定义字体方法@font-face@font-face属性可以让我们自定义网站字体属性，然后引用到想要应用该字体的元素上。基本语法：@font-face { font-family: <font-name>; src: local( <family-name> ) | <url> [format("formatName")][,<url> [format("formatName")]]*; unicode-range:

作者：阮一峰日期：2019年3月25日一、概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布...

在前端工作中遇到三角形或者需要箭头的样式，我们不仅可以利用图片来实现效果，还可以利用css来实现。<div class="triangle"></div>1、利用border来实现(1)向下三角形.triangle{ width: 0; height: 0; border-width: 100px; border-style: solid; border-color:#ff0000 transparent transparent transp

说明每天10分钟，重构你的前端知识体系专栏笔记。一、介绍这一节学习一下 CSS的动画和交互。二、animation 属性2.1、基本用法@keyframes mykf{ from {background: red;} to {background: yellow;}}div{ animation: mykf 5s infinite;}2.2、六个部分animation-name 动画的名称，是一个 keyframes 类型的值animatio

cubic-bezier 曲线是 css3 动画的一个重要基石。另一个为 steps （ease 等都是 cubic-bezier 的特殊形式），css3 中的 cubic_bezier 曲线限制了首尾两控制点的位置，通过调整中间两控制点的位置可以灵活得到常用的动画效果，同时 canvas 也进行了相应的支持，也存在相应的工具可以根据想要的曲线得到对应 cubic bezier 曲线的控制点参数。而 ie(6-9) 却没有相应的支持，为了能在各个平台得到一致的动画效果，则不可避免要在 ie 上通过.

一、什么是贝塞尔曲线1962年，法国工程师皮埃尔·贝塞尔（Pierre Bézier），贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线。如今，贝赛尔曲线是计算机图形学中相当重要的一种曲线，它能过优雅地模拟人手绘画出的线。它通过控制曲线上的点（起始点、终止点以及多个参考点）来创造、编辑图形。其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的，中间与贝塞尔曲线交叉，两端是控制端点。移动两端的端点时贝塞尔曲线改变曲线的曲率（弯曲的程度）；移动中间点（也就是移动虚拟的控制线）时，贝塞尔曲线在起始

http://www.bootstrapmb.com/item/2709http://www.bootstrapmb.com/item/2709/preview

windows常见内置中文字体字体中文名 字体英文名宋体 SimSun（浏览器默认）黑体 SimHei微软雅黑 Microsoft Yahei微软正黑体 Microsoft JhengHei楷体 ...

前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。使用：#sticky-nav {position...

我们都知道在ios的safari浏览器和app内核浏览器中，当一个h5页面内容超出屏幕高度，我们手指去滑动屏幕的时候，只要手势一离开屏幕，滚动立刻结束。这时候我们可以通过设置-webkit-overflow-scrolling=touch来使页面可以顺畅滚动，但是设置这个也会引出许多问题。        1、单独对body设置-webkit-overflow-scrolling touch是无...

1. -webkit-overflow-scrolling:touch是什么？MDN上是这样定义的：-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和...

　　今天在群里看到群友问了一个这样的问题，就是如何更改placeholder属性中文字的颜色，以前用过这属性，却是没更改过颜色，于是便试了试，中途遇到些问题，查找资料后特来总结一下。　　熟悉HTML5的人应该都知道，placeholder这个属性是HTML5中新增的属性，该属性的作用是规定可描述输入字段预期值的简短的提示信息，该提示会在用户输入之前显示在输入字段中，会在用户输入字段后消失，有些...

px：绝对单位，页面按精确像素展示             IE5+em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。           IE5+rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE

　目前，文字信息仍是网站最主要的内容，随着CSS3技术的不断成熟，Web字体逐渐成为话题，这项让未来Web更加丰富多彩的技术拥有多种实现方案，其中之一是通过@font-face属性在网页中嵌入自定义字体，主流的浏览器都支持这项技术，本文介绍主要的几种Web字体格式及各浏览器兼容情况。Web字体格式介绍TrueType (.ttf)　　Windows和Mac系统最常用的字体格式，其最大的特点就是它是...

有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？前言webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。演示

线性渐变：background:-webkit-gradient(linear,0 80%,0 100%,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.6)));/*Old gradient for webkit*/background: -webkit-linear-gradient(top, rgba(0,0,0,

贝塞尔曲线与CSS3动画、SVG和canvas的基情这篇文章发布于 2013年08月30日，星期五，23:23，归类于 canvas相关, css相关, SVG相关。 阅读 95700 次, 今日 47 次by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpres

平时在做动画的时候，如果涉及交互比较多一些的时候。比如像拆礼盒，摇筛子等基于微信的小游戏，transitionend和animationend这个两个事件都会用到，之前做微信的小游戏过程中，把两个事件在pc端和移动端的常用的浏览器给测试了一下并做了整理，虽然浏览器的支持结果大同小异，但是还是有一些细微的差别的，其中微信和qq浏览器（其实是同一个）对于两个事件都需要加前缀！一、transit

 css3中的display：-webkit-box的用法webkit-box1.之前要实现横列的web布局，通常就是float或者display:inline-block;但是都不能做到真正的流体布局。至少width要自己去算百分比。2.flexiblebox就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。3.box-flex是css3新添加的盒子模型...

使用display:-webkit-box布局很久了，但是每次使用的时候都是现用现查，而且发现网上没有找到一篇非常全面的关于此布局的介绍，今天决定写一篇博客来记录这个自适应布局。1、首先不同的浏览器要做不同的兼容：目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/...

响应式图片的作用：为使用不同分辨率的不同浏览器用户提供适合其浏览环境的图片大小的解决方案。之前的解决方法是使用@media但是-webkit新提出的image-set和srcset同样可以解决问题。image-set用于CSS背景图:{background-image:url(image1.png);background-image:-webkit-im...