Vanessa

2019-07-23 描述为文本创建一个风化效果或者嵌入背景的雕刻效果。HTML<pclass="etched-text">Iappearetchedintothebackground.</p>CSS.etched-text{text-shadow:02pxwhite;font-size:1.5rem;font-weight:bold;color:#b8bec5;background-color:#d

2019-07-22 描述创建基于元素本身颜色的阴影，类似于 box-shadow。HTML<divclass="dynamic-shadow"></div>CSS.dynamic-shadow{position:relative;width:10rem;height:10rem;background:linear-gradient(75deg,#6d78ff,#00ffb8);z-index:1;}.

2019-07-21 描述改变文本选中的样式。HTML<pclass="custom-text-selection">Selectsomeofthistext.</p>CSS::selection{background:aquamarine;color:black;}.custom-text-selection::selection{background:deeppink;color:white;}D

2019-07-20 描述在有 WebKit 功能的浏览器中，为滚动属性为 overflow 的页面和元素定义他们滚动条的样式。HTML<divclass="custom-scrollbar"><p>Loremipsumdolorsitametconsecteturadipisicingelit.<br/>Iureidexercitationemnullaquirepellatlaborumvitae,<br

2019-07-19 描述使用纯 CSS 创建一个圆形。HTML<divclass="circle"></div>CSS.circle{border-radius:50%;width:2rem;height:2rem;background:#333;}DemoSeethePen<ahref='https://codepen.io/vanessa219/pen/BXyNGY/'>Circle</a>byVa

2019-07-18 描述如果文本的长度大于一行，那么他将在第 n 行被一个渐变的效果截断。HTML<pclass="truncate-text">IfIexceedoneline'swidth,Iwillbetruncated.</p>CSS.truncate-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:200

2019-07-17 描述如果文本的长度大于一行，那么他将在第 n 行被一个渐变的效果截断。HTML<pclass="truncate-text-multiline">Loremipsumdolorsitamet,consetetursadipscingelitr,seddiamnonumyeirmodtemporinviduntutlaboreet.</p>CSS.truncate-text-multi

2019-07-16 描述使用 position:absolute 和 transform:translate()水平垂直居中一个父元素中的子元素（这是除 flexbox 和 display:table 以外的另一种居中方案）。他类似于 flexbox，这种方案不需要你知道父元素或子元素的高和宽，因此他非常适用于有自适应需求的应用。HTML<divclass="parent"><divclass="child">Ce

2019-07-15 描述在当前屏幕中，让最后一个元素占满可用的剩余空间，当窗口大小变化时也需如此。HTML<divclass="container"><div>Div1</div><div>Div2</div><div>Div3</div></div>CSShtml,body{height:100%;margin:0;}.container{height:100%;display:flex;flex

2019-07-14 描述使用 grid 垂直和水平居中一个父元素中的子元素。HTML<divclass="grid-centering"><divclass="child">Centeredcontent.</div></div>CSS.grid-centering{background:aliceblue;display:grid;justify-content:center;align-items:

2019-07-13 描述将一个元素垂直居中于另一个元素中。HTML<divclass="ghost-trick"><divclass="ghosting"><p>Verticallycenteredwithoutchangingthepositionproperty.</p></div></div>CSS.ghosting{height:160px;background:#0ff;}.ghostin

2019-07-12 描述使用 flexbox 垂直和水平居中一个父元素中的子元素。HTML<divclass="flexbox-centering"><divclass="child">Centeredcontent.</div></div>CSS.flexbox-centering{display:flex;justify-content:center;align-items:center;heigh

2019-07-11 描述对父元素中的子元素进行平均分配。HTML<divclass="evenly-distributed-children"><p>Item1</p><p>Item2</p><p>Item3</p></div>CSS.evenly-distributed-children{display:flex;justify-content:space-between;}DemoSeetheP

2019-07-10 描述使用 display:table 在父元素中水平且垂直居中一个子元素（flexbox 的一个替代方案）。HTML<divclass="container"><divclass="center"><span>Centeredcontent</span></div></div>CSS.container{border:1pxsolid#333;height:250px;width:25

2019-07-09 描述一个元素的宽度是变化的，在自适应中我们需要保证他的高度和宽度一致（例如：他的宽高比率为一个常数）。HTML<divclass="constant-width-to-height-ratio"></div>CSS.constant-width-to-height-ratio{background:#333;width:50%;}.constant-width-to-height

2019-07-08 描述确保一个元素能够对他的子元素进行浮动的自我清除。注意：如果你还在使用浮动来构建你的布局，这是唯一有用的。请考虑使用现在流行的 flex 盒子布局或栏栅布局。HTML<divclass="clearfix"><divclass="floated">floata</div><divclass="floated">floatb</div><divclass="floated">floa

2019-07-07 描述重置盒子模型，使 width 和 height 不会被他们的 border 或 padding 所影响。HTML<divclass="box">border-box</div><divclass="boxcontent-box">content-box</div>CSShtml{box-sizing:border-box;}*,*::before,*::after{box-sizing:in

2019-07-06 描述创建一个弹跳的加载动画。HTML<divclass="bouncing-loader"><div></div><div></div><div></div></div>CSS@keyframesbouncing-loader{to{opacity:0.1;transform:translate3d(0,-1rem,0);}}.bouncing-loader{display:fl

精选常见交互，帮助您拥有简洁酷炫的站点布局清除浮动重置 box-sizing 宽高保持一致 table 居中显示平均分配子元素盒子模型居中垂直小技巧网格居中最后一个元素占满剩余可用高度使用 transform 进行居中多行文本截断文本截断视觉圆自定义滚动条自定义文本选中样式渐变阴影文本风化效果图片适配全屏文本渐变细而明显的边框:not 选择器逃离屏幕对溢出的内容进行渐变漂亮的下划线重置所有样式带形状的分割线系统字

2019-07-05 描述创建一个数组，其元素应按照原始数组中的位置进行分组。具体如何分组、是否应该被合并应以提供的函数的返回值作为最终值。提示检测提供的最后一个参数是否为函数使用 Math.max()获取参数中最长数组的长度创建一个长度为第二步结果的数组作为返回值使用带有迭代功能的 Array.from()对被分组的元素创建一个数组如果参数中的数组长度不一样时，请使用 undefined 替代找不到的值对元