作为前端你该知道的CSS 实用 Tips（欢迎补充）

为前端，日常开发充满了各种挑战与乐趣，我们穷尽一切在奇葩的需求中提升用户体验。本文将列举一些前端开发中碰到的小众需求，并提供解决方案以供参考。

一、修改鼠标手势图标

很多童鞋可能都用过：

cursor: pointer | wait | hand | text | move | not-allowed;

但是，它还支持用户自定义图片，你知道吗？

cursor: url(jartto.cur), url(http://jartto.wang/jartto.gif), auto;

下图为各浏览器支持情况：

记得在定义完自定义的游标之后在末尾加上一般性的游标，以防那些url所定义的游标不能使用。

二、box-shadow 三边阴影

box-shadow 大家都不陌生，我们一般这么用：

box-shadow: h-shadow v-shadow blur spread color inset;

可是三边阴影该如何设置呢？请不要忽视设计师的脑洞：

#shadowBox { background-color: #ddd; margin: 0px auto; padding: 10px; width: 220px; box-shadow: 0px 8px 10px gray, -10px 8px 15px gray, 10px 8px 15px gray;}

三、超好用的 currentColor

先来举个例子，html代码：

<a href="##" class="link"><i class="icon"></i>返回</a>

css 代码：

.icon { display: inline-block; width: 16px; height: 20px; background-image: url(http:jartto.wang/test.png); background-color: currentColor; /* 该颜色控制图标的颜色 */ background-position: 0 0;}.link:hover { color: #333; /* 虽然改变的是文字颜色，但是图标颜色也一起变化了 */}

currentColor 表示“当前的标签所继承的文字颜色”

四、png 图片如何改颜色

网页中大多使用透明图片 png 格式，可是如果有天产品经理说，这个图标颜色能不能改成红色，恰巧设计师不能支持你，你该如何办？其一：自己重新 ps 一下图片，换个颜色；其二：只能上 svg 喽，搞成 icon font；

这里，我们来说第三种方式，妙不妙可以试试哦！

.icon { display: inline-block; width: 20px; height: 20px; overflow: hidden;}.icon-del { background: url(delete.png) no-repeat center;}.icon > .icon { position: relative; left: -20px; border-right: 20px solid transparent; /*下文注意点 2 有解释*/ -webkit-filter: drop-shadow(20px 0); filter: drop-shadow(20px 0); }

html 代码:

<p><strong>原始图标</strong></p><i class="icon icon-del"></i><p><strong>可以变色的图标</strong></p><i class="icon"><i class="icon icon-del"></i></i>

需要注意几点： 1.对于背景透明的 png 小图标而言，如果我们施加一个不带模糊的投影，就等同于生成了另外一个颜色的小图标； 2.在 chrome 浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其 drop-shadow 是不可见的。实体部分哪怕有 1px 可见，则 drop-shadow 完全可见。

原理其实很简单，使用了 css3 滤镜 filter 中的 drop-shadow， drop-shadow 滤镜可以给元素或图片非透明区域添加投影。

五、vh 与 vw

相对于视口的宽度。视口被均分为 100 单位的 vw， vh 同理。

我一般会在强制某一个容器占一整屏的时候使用，如：

.box{ height: calc(100vh - 50px);}

视口高度减去页头固定区域，剩下的高度设置给容器。当然，我们也可以用它设置大小，如下：

h1 { font-size: 8vw;}

如果视口的宽度是 200mm，那么上述代码中h1元素的字号将为 16mm，即 (8x200)/100

值得注意的是， less 中使用需要加 ～

min-height: ~"calc(100vh - 68px)";

此外，还有一些如 ch ， vmax， vmin 等属性等着你去扩展

六、如何去掉 chrome input 的背景黄色

当我们在做登陆页面的时候，在 chrome 中 input 会带上自动补全的黄色背景，大大影响美观。很多网站都没有去处理，但这并不难处理。作为高逼格的前端，这里就可以体现出你的价值，解决方案如下：

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset !important;}

当然，你也可以使用方案二，如下：

input:-webkit-autofill { -webkit-animation-name: autofill; -webkit-animation-fill-mode: both;}@-webkit-keyframes autofill { to { color: #fff; background: transparent; }}

七、chrome 中设置小于 12px 的字体

这种改小字体，绝大部分肯定都是设计师的需求，因为小显得精致。

ant-checkbox-wrapper { cursor: pointer; font-size: 10px; display: inline-block; -webkit-text-size-adjust: none; // 不支持 transform: scale(0.9);}

八、0.5px border 如何操作

现行方法大致有如下几条： 1.使用渐变 linear-gradient 来操作，但需要注意浏览器兼容前缀；

.div::after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%);}

2.缩放 scale 处理：

div::after{ content: ""; display: block; position: absolute; left: -50%; bottom: 0; width: 200%; height: 1px; background: #c3c3c3; -webkit-transform: scale(0.5);}

3.使用 background-image 和 css3 的九宫格裁减

.bd-t::after { content: " "; position: absolute; left: 0; top: 0; width: 100%; border-top: 1px solid transparent; /* 下面用 stretch 和 round 都可以 */ border-image: url('pic.png') 2 1 1 1 stretch; -webkit-border-image: url('pic.png') 2 1 1 1 stretch;}

九、border 颜色渐变

border-color:red green blue pink;

“border-width” 属性如果单独使用的话是不会起作用的。请首先使用 “border-style” 属性来设置边框。

十、css3 画小箭头

这里推荐两种方式：其一，通过 border 来实现

/*箭头向上*/.arrow-up { width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid #fff;}/*箭头向下*/.arrow-down { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #0066cc;}

其二，拼凑法（伪类或元素），将 div 隐藏两边或设置 z-index，然后旋转，放到合适位置。

div { position: absolute; bottom: -2px; left: 7px; width: 10px; height: 10px; transform: rotate(-45deg); z-index: -1; /* 放在容器后，被遮盖住*/}

比较简单，就不赘述了。

十一、有趣的 drop-shadow

用法如下：

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);filter:drop-shadow(5px 5px 10px black)

CSS3 滤镜 filter 中的 drop-shadow，drop-shadow 滤镜可以给元素或图片非透明区域添加投影。

上文中已经提到了一种使用场景，这里还想说另一种，即使用拼凑法作出的小气泡，如果气泡需要阴影的话，请用 drop-shadow 来替代 box-shadow。

十二、修改浏览器默认滚动条

有时候一些不期而遇的滚动条会让页面很尴尬，这时候你还可以强行美化一下，参考代码如下：

/*滚动条 start*/::-webkit-scrollbar { width: 1px; height: 4px; background-color: #F5F5F5;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background: #fff ;}/*定义滑块 内阴影+圆角*/::-webkit-scrollbar-thumb { border-radius: 3px; box-shadow: inset 0 0 6px rgba(0,0,0,.3); // background-color:rgba(7, 170, 247, 0.7); background-color: transparent;}::-webkit-scrollbar-thumb:hover { border-radius: 3px; box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color:rgba(7, 170, 247, 1);}

十三、safari placeholder bugs

在项目中遇到 input 的 placeholder 在 safari 下设置行高失效的问题，解决思路如下： 1.使用 padding 使提示文字居中，如果 font-size:14px, UI 高度为 40px,我们可以设 height：14px,padding:13px0; 2.使用 line-height:1px; 3.使用 vertical-align: middle;

补充一条：Safari 来写 hack 即 [;line-height:1;]

十四、总结

这些都是在我日常开发中碰到的奇葩问题，回头想想其实挺有意思，遂整理总结之。欢迎各位小伙伴展示自己总结的tips，也来学习下。

端小白Earl笔记

箭头函数的基本语法

箭头函数属于函数表达式。箭头函数表达式的写法与函数申明以及普通函数表达式的写法有所不同。

//函数申明
function f1(){
    console.log('普通函数')
}
function f2(a, b){
    return a + b;
}

//普通函数表达式
let f1=function(){
    console.log('普通函数')
}
let f2=function(a, b){
    return a + b;
}

//箭头函数表达式
let f1=()=> {
    console.log('箭头函数')
}
let f2=(a, b)=> {
    return a + b;
}

箭头函数的函数体如果只有一个表达式，可以写成一行的简写体，省略return，直接返回该表达式。

//基础语法
let f2=(a, b)=> {
    return a + b;
}

//简写体
let f2=(a, b)=> a + b

箭头函数如果只有一个参数，可以省略小括号。

//基础语法
let f3=(a)=> {
    return a + 1;
}
let f4=(a)=> {
    console.log(a);
}

//简写体
let f3=a=> a + 1
let f4=a=> {
    console.log(a);
}

箭头函数的加小括号的函数体返回对象字面量表达式。

let f5=age=> ({Age: age})
console.log(f5(18))  // {Age: 18}

箭头函数支持参数列表解构。

let f6=([a, b]=[1, 2], {x: c}={x: a + b})=> a + b + c
f6()  // 6

箭头函数的特点

箭头函数表达式比普通函数表达式更简洁，指向性更强，可读性更好。
箭头函数属于表达式函数，因此不存在函数提升。
箭头函数相当于匿名函数，不能作为构造函数，不可以使用new命令。
箭头函数没有prototype属性。
箭头函数不绑定this，它只会从自己的作用域链的上一层继承 this。

var user1={
  name:'earl',
  fullname:function(){ return this.name }  // 'earl' 这里的this指向user1
}

var user2={
  name:'earl',
  fullname:()=>this.name  //'' 箭头函数没有定义this绑定，这里的this指向window
}

var user3={
  name:'earl',
  sleep:function(){ 
    console.log(this)   // 这里的this指向user3
    var fn=()=>{console.log(this)} // 这里的this也指向user3
    fn()
  }  
}

使用call,apply,bind并不会改变箭头函数中的this指向。

window.name="window_name";
let f1=function () {
  return this.name
}
let f2=()=> this.name
let obj={ name: "obj_name" }

console.log(f1.call(obj))  //obj_name
console.log(f2.call(obj)) // window_name

箭头函数不绑定arguments，它只会从自己的作用域链的上一层继承arguments。箭头函数可以使用剩余参数。

头函数是ES6新增的一种函数简写形式。

箭头函数的写法更简洁，当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号

当参数只有一个的时候可以省略小括号

箭头函数和普通有很多不同，最主要就是改变的了this的指向

箭头函数内部的this由上下文决定。可以理解为箭头函数在定义的时候this就已经确定了。而普通函数只有在调用的时候才指定this。

普通函数，setTimeout的回调函数是由window调用，所以this指向window

箭头函数，this总是指向词法作用域，即obj

在线咨询

上一篇：「前端」Bootstrap 网页模版 Pure CS
下一篇：6招轻松搞定网页禁止复制粘贴

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

作为前端你该知道的CSS 实用 Tips（欢迎补充）

箭头函数的基本语法

箭头函数的特点

您的项目需求