整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
為前端，日常開(kāi)發(fā)充滿了各種挑戰(zhàn)與樂(lè)趣，我們窮盡一切在奇葩的需求中提升用戶體驗(yàn)。本文將列舉一些前端開(kāi)發(fā)中碰到的小眾需求，并提供解決方案以供參考。
一、修改鼠標(biāo)手勢(shì)圖標(biāo)
很多童鞋可能都用過(guò)：
cursor: pointer | wait | hand | text | move | not-allowed;
但是，它還支持用戶自定義圖片，你知道嗎？
cursor: url(jartto.cur), url(http://jartto.wang/jartto.gif), auto;
下圖為各瀏覽器支持情況：
記得在定義完自定義的游標(biāo)之后在末尾加上一般性的游標(biāo)，以防那些url所定義的游標(biāo)不能使用。
二、box-shadow 三邊陰影
box-shadow 大家都不陌生，我們一般這么用：
box-shadow: h-shadow v-shadow blur spread color inset;
可是三邊陰影該如何設(shè)置呢？請(qǐng)不要忽視設(shè)計(jì)師的腦洞：
#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
先來(lái)舉個(gè)例子，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; /* 該顏色控制圖標(biāo)的顏色 */ background-position: 0 0;}.link:hover { color: #333; /* 雖然改變的是文字顏色，但是圖標(biāo)顏色也一起變化了 */}currentColor 表示“當(dāng)前的標(biāo)簽所繼承的文字顏色”
四、png 圖片如何改顏色
網(wǎng)頁(yè)中大多使用透明圖片 png 格式，可是如果有天產(chǎn)品經(jīng)理說(shuō)，這個(gè)圖標(biāo)顏色能不能改成紅色，恰巧設(shè)計(jì)師不能支持你，你該如何辦？ 其一：自己重新 ps 一下圖片，換個(gè)顏色； 其二：只能上 svg 嘍，搞成 icon font；
這里，我們來(lái)說(shuō)第三種方式，妙不妙可以試試哦！
.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; /*下文注意點(diǎn) 2 有解釋*/ -webkit-filter: drop-shadow(20px 0); filter: drop-shadow(20px 0); }html 代碼:
<p><strong>原始圖標(biāo)</strong></p><i class="icon icon-del"></i><p><strong>可以變色的圖標(biāo)</strong></p><i class="icon"><i class="icon icon-del"></i></i>
需要注意幾點(diǎn)： 1.對(duì)于背景透明的 png 小圖標(biāo)而言，如果我們施加一個(gè)不帶模糊的投影，就等同于生成了另外一個(gè)顏色的小圖標(biāo)； 2.在 chrome 瀏覽器下，如果一個(gè)元素的主體部分，無(wú)論以何種方式，只要在頁(yè)面中不可見(jiàn)，其 drop-shadow 是不可見(jiàn)的。實(shí)體部分哪怕有 1px 可見(jiàn)，則 drop-shadow 完全可見(jiàn)。
原理其實(shí)很簡(jiǎn)單，使用了 css3 濾鏡 filter 中的 drop-shadow， drop-shadow 濾鏡可以給元素或圖片非透明區(qū)域添加投影。
五、vh 與 vw
相對(duì)于視口的寬度。視口被均分為 100 單位的 vw， vh 同理。
我一般會(huì)在強(qiáng)制某一個(gè)容器占一整屏的時(shí)候使用，如：
.box{ height: calc(100vh - 50px);}視口高度減去頁(yè)頭固定區(qū)域，剩下的高度設(shè)置給容器。當(dāng)然，我們也可以用它設(shè)置大小，如下：
h1 { font-size: 8vw;}如果視口的寬度是 200mm，那么上述代碼中h1元素的字號(hào)將為 16mm，即 (8x200)/100
值得注意的是， less 中使用需要加 ～
min-height: ~"calc(100vh - 68px)";
此外，還有一些如 ch ， vmax， vmin 等屬性等著你去擴(kuò)展
六、如何去掉 chrome input 的背景黃色
當(dāng)我們?cè)谧龅顷戫?yè)面的時(shí)候，在 chrome 中 input 會(huì)帶上自動(dòng)補(bǔ)全的黃色背景，大大影響美觀。很多網(wǎng)站都沒(méi)有去處理，但這并不難處理。作為高逼格的前端，這里就可以體現(xiàn)出你的價(jià)值，解決方案如下：
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset !important;}當(dāng)然，你也可以使用方案二，如下：
input:-webkit-autofill { -webkit-animation-name: autofill; -webkit-animation-fill-mode: both;}@-webkit-keyframes autofill { to { color: #fff; background: transparent; }}七、chrome 中設(shè)置小于 12px 的字體
這種改小字體，絕大部分肯定都是設(shè)計(jì)師的需求，因?yàn)樾★@得精致。
ant-checkbox-wrapper { cursor: pointer; font-size: 10px; display: inline-block; -webkit-text-size-adjust: none; // 不支持 transform: scale(0.9);}八、0.5px border 如何操作
現(xiàn)行方法大致有如下幾條： 1.使用漸變 linear-gradient 來(lái)操作，但需要注意瀏覽器兼容前綴；
.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” 屬性如果單獨(dú)使用的話是不會(huì)起作用的。請(qǐng)首先使用 “border-style” 屬性來(lái)設(shè)置邊框。
十、css3 畫(huà)小箭頭
這里推薦兩種方式： 其一，通過(guò) border 來(lái)實(shí)現(xiàn)
/*箭頭向上*/.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;}其二，拼湊法（偽類(lèi)或元素），將 div 隱藏兩邊或設(shè)置 z-index，然后旋轉(zhuǎn)，放到合適位置。
div { position: absolute; bottom: -2px; left: 7px; width: 10px; height: 10px; transform: rotate(-45deg); z-index: -1; /* 放在容器后，被遮蓋住*/}比較簡(jiǎn)單，就不贅述了。
十一、有趣的 drop-shadow
用法如下：
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);filter:drop-shadow(5px 5px 10px black)
CSS3 濾鏡 filter 中的 drop-shadow，drop-shadow 濾鏡可以給元素或圖片非透明區(qū)域添加投影。
上文中已經(jīng)提到了一種使用場(chǎng)景，這里還想說(shuō)另一種，即使用拼湊法作出的小氣泡，如果氣泡需要陰影的話，請(qǐng)用 drop-shadow 來(lái)替代 box-shadow。
十二、修改瀏覽器默認(rèn)滾動(dòng)條
有時(shí)候一些不期而遇的滾動(dòng)條會(huì)讓頁(yè)面很尷尬，這時(shí)候你還可以強(qiáng)行美化一下，參考代碼如下：
/*滾動(dòng)條 start*/::-webkit-scrollbar { width: 1px; height: 4px; background-color: #F5F5F5;}/*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background: #fff ;}/*定義滑塊 內(nèi)陰影+圓角*/::-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
在項(xiàng)目中遇到 input 的 placeholder 在 safari 下設(shè)置行高失效的問(wèn)題，解決思路如下： 1.使用 padding 使提示文字居中，如果 font-size:14px, UI 高度為 40px,我們可以設(shè) height：14px,padding:13px0; 2.使用 line-height:1px; 3.使用 vertical-align: middle;
補(bǔ)充一條：Safari 來(lái)寫(xiě) hack 即 [;line-height:1;]
十四、總結(jié)
這些都是在我日常開(kāi)發(fā)中碰到的奇葩問(wèn)題，回頭想想其實(shí)挺有意思，遂整理總結(jié)之。歡迎各位小伙伴展示自己總結(jié)的tips，也來(lái)學(xué)習(xí)下。
端小白Earl筆記
//函數(shù)申明
function f1(){
console.log('普通函數(shù)')
}
function f2(a, b){
return a + b;
}
//普通函數(shù)表達(dá)式
let f1=function(){
console.log('普通函數(shù)')
}
let f2=function(a, b){
return a + b;
}
//箭頭函數(shù)表達(dá)式
let f1=()=> {
console.log('箭頭函數(shù)')
}
let f2=(a, b)=> {
return a + b;
}//基礎(chǔ)語(yǔ)法
let f2=(a, b)=> {
return a + b;
}
//簡(jiǎn)寫(xiě)體
let f2=(a, b)=> a + b//基礎(chǔ)語(yǔ)法
let f3=(a)=> {
return a + 1;
}
let f4=(a)=> {
console.log(a);
}
//簡(jiǎn)寫(xiě)體
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() // 6var user1={
name:'earl',
fullname:function(){ return this.name } // 'earl' 這里的this指向user1
}
var user2={
name:'earl',
fullname:()=>this.name //'' 箭頭函數(shù)沒(méi)有定義this綁定，這里的this指向window
}
var user3={
name:'earl',
sleep:function(){
console.log(this) // 這里的this指向user3
var fn=()=>{console.log(this)} // 這里的this也指向user3
fn()
}
}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頭函數(shù)是ES6新增的一種函數(shù)簡(jiǎn)寫(xiě)形式。
箭頭函數(shù)的寫(xiě)法更簡(jiǎn)潔，當(dāng)箭頭函數(shù)的函數(shù)體只有一個(gè) `return` 語(yǔ)句時(shí)，可以省略 `return` 關(guān)鍵字和方法體的花括號(hào)
當(dāng)參數(shù)只有一個(gè)的時(shí)候可以省略小括號(hào)
箭頭函數(shù)和普通有很多不同，最主要就是改變的了this的指向
箭頭函數(shù)內(nèi)部的this由上下文決定?？梢岳斫鉃榧^函數(shù)在定義的時(shí)候this就已經(jīng)確定了。而普通函數(shù)只有在調(diào)用的時(shí)候才指定this。
普通函數(shù)，setTimeout的回調(diào)函數(shù)是由window調(diào)用，所以this指向window
箭頭函數(shù)，this總是指向詞法作用域，即obj
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
