整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者按：近來似乎涌現了大批優秀的設計軟件，關于“設計系統”的討論也越來越火，毋庸置疑，這個話題對設計師和公司來講至關重要。本文譯自Medium中原作者Chris Bam Harrison（tabcorp設計師）中原標題為"UX Design Tools for 2018 (For Mac AND PC)"的文章。
我有幸與一個大型團隊的設計師、開發人員和商業人員共事。作為一名設計師，我接手了很多個性化、自由感十足的項目，這些項目在不同的設計工具和系統中有著不同的需求，所以了解什么作品適合什么樣的工具其實至關重要。
由于我既用PC端也用Mac端，所以這兩個系統中的設計軟件個人大部分都接觸過，選擇性也比較寬泛，在其中發現了一些好的應用也希望能供你參考。本文的推薦都是本人親測好用的，絕不參雜任何商業利益。
概念構思階段
作為讀者，我知道你前來翻看這篇文章時抱著對新鮮應用推薦的極大期待，但開篇我還是不得不說，最好的應用就是——紙和筆。雖然這個答案看起來令人失望而草率，但以它們作為整篇文章的引子其實再合適不過。
紙和筆能很好地保持設計師原生的靈感,并有益于設計師反復修改、磨合自己的作品，而不至于桎梏于一些不必要的細節中浪費時間。世界上沒有毫無缺憾的設計，因此將自己從數碼設計工具中解脫出來很大程度上意味著你不用再被無謂的細節拖沓進度。
另外，我選擇筆還有一個原因，那就是：不要使用能夠被擦除的工具。當你被某一個部分絆住腳時不要停下來，繼續摸索向前走才能逐漸接近好的預期。這一條建議從前甚至改變了我的作品軌跡，我的筆記本開始保留很多構思時粗糙的線條，雖然混亂不堪，但使我變得更有效率也更富于創造力，也許不知哪一秒就在粗糙的線條中發現了自己的靈感。
另一貫徹UX理念的概念就是用戶訪問，對此我十分鐘愛Whimsical。Whimsical的流程圖制作功能十分強大，而且視覺上一目了然。雖然每月收費10美元，但絕對物有所值，它一向以操作簡便快捷著稱。
為了尋找靈感，我常去的兩個網站是Dribbble和Muzli。Dribbble很適合快捷地尋找一些新鮮的，富有創意的點子，尤其是當你尋找簡單的視覺沖擊感時非常好用，而在尋找系統性的產品邏輯線方面可能稍稍遜色。這個網站的方便之處在于你可以在上面粉一些你喜歡的設計師和作品，并和他們進行交流，隨時隨地保持關注動態，當然這也是一個監管非常良好的社區，很少會出現“三俗”創意污染環境。
Muzli這個網站中最令我中意的就是它的每周精品匯總和UX互動交流會。這個網站會定期更新一些有好點子、非常精彩的文章，令人總能在里面發現點兒新的東西。
合作共享與版本控制階段
如果你正在團隊中進行一個項目，想要分享工作中的某些創意，拍成照片通過郵箱分享是一個辦法，但還有一個方法看起來更便捷，那就是——Zeplin（Mac，PC通用）。Zeplin是一個很酷的應用，它的特色非常鮮明。
首先，分享工作創意和進程它非常拿手，你可以邀請合作伙伴共享視頻、下載私人文件并添加評論對某個設計品進行交流。
其次，當你進行設計時，該軟件會生成樣式指南，便于設計師擷取十六進制值的顏色和樣式。
最后Zeplin是一個完全以代碼形式傳播設計樣品的應用。這一點下面會有所提及。
總之，Zeplin對版權持有者非常有價值，但倘若多個設計師一同合作怎么辦呢？這時每個人都需要版本控制。版本控制是一個日常中不常見的術語，指的是一種軟體工程技巧，籍以在開發過程中確保由不同人所編輯的同一檔案都得到更新，但這個問題Zeplin就很難解決了。
為此Trunk(Mac端）能很好地解決這一問題。
對設計師而言，Trunk是實打實的社交編程及代碼托管軟件。你可以在Trunk設置好需要關注的文檔，它會實時觀測它們的變化，當發生更改時，Trunk會記錄其中的變化，同時更改者也可以更新評論做出解釋，讓用戶知道為什么要這么做。
Trunk的這一屬性對設計師合作團隊來說無疑是福音，因為再也不必擔心其中未知的改動而不知道緣由。設計師甚至可以以回滾的方式將文檔返回到變化前并重新處理其中矛盾的部分，這是其最大的魅力所在。
注意：Trunk僅與Sketch和PS圖象處理軟件文件兼容。對于Figma用戶來說，Figma實際上內置了一些輕型版本控制功能。
框架圖及初期設計階段
在你的創意與團隊分享之后，大家都想見到該內容大體的情況，這時該用什么呢？
在此我將分享一些基礎的框架圖制作軟件，這里的目的是大致描繪一下一些應用的用途，供讀者快速參考。
在此又與我們的老朋友Whimsical見面了，它不僅有強大的流程圖制作功能，也有異想天開的框架圖設計功能。事實上，你可能并不需要一個專用的線框應用程序。在這個方向上，傳統的筆和紙會做得很好，像Sketch或Figma這樣的設計工具也能勝任。那么為什么要使用Whimsical呢——總結一句，那就是它干起來真的非?？?、非常有趣。
Whimsical有一個內置的低保真度的組件庫：從按鈕、到復選框、到文本輸入框、到滑塊、到標簽條等等，一切都一目了然。所有組件都在智能向導上運行，有點兒像樂高拼圖。抓取幾個基本組件，把它們放在一起，很快就會有一個粗略的整體布局。這對于構建設計師的設計草圖和初期理念是一個非?？旖?、保真的辦法。
同時，Whimsical也支持社群共享活動，在此設計師可以將自己的作品發送給合作伙伴從而得到反饋。
看到上面兩個圖標你是不是馬上熟悉起來了，沒錯，它們就是大名鼎鼎的Sketch君和Figma君。它們隨處可見，也許大家對它們的應用已經了如指掌了，但這里還是有一個很實用的小建議：制作（或下載）線框工具包。雖然線上的圖片已經很精美了，但總不如自己制作出來的有趣。我們稍后將詳述這兩個軟件，不過有一條恒定的標準來評價好用與不好用，那就是：簡單快捷。
原型設計階段
原型能夠很好地展示你的作品在早期應用時該如何操作及會出現什么問題。市場上的原型應用程序有很多，在此我將推薦幾款個人比較中意的。
個人認為，Atomic是一個很偉大的發明。之所以如此認為，是因為一個特殊的理由：Atomic支持原創者將自己的設計邏輯編程入原型中，這意味著即使表面上看起來不像本來設計的樣子，但在運行中卻會完完全全地遵照設計師地本意。
接下來要說的是 Flinto（Mac端），Flinto以“什么都會一點兒”而自薦，算是個“百事通”，但其中最厲害的就是交互動畫設計功能了。在Flinto中，滾動交互、復雜過渡和微交互的操作都十分便捷，該軟件同時也支持嵌入視頻或GIF，這樣設計師就可以在原型中使用現有的動畫資源。
綜上，如果想要做出真正的高保真互動設計和動畫，那么Flinto算是再好不過的模擬器了。
最后勉強提及一下InVision吧。我不是它的粉絲，因為個人感覺相對于產品設計支持，InVision把更多的精力投放在商業宣傳上。不過它在生成快速共享的HTML原型并進行即時修改方面還是非常強大的。
InVision確有所長，但個人更偏愛Atomic。事實上，如果你不想使用Atomic，并且傾向于InVision，也可以考慮一下Figma或Sketch。首先，它們都支持基本的可點擊原型，這些原型可以與用戶共享并進行評論。其次，它們都不專長于滾動交互和高級動畫定制之類的操作，但對于制作一個簡單的原型來說也足矣。
高保真設計階段
這個部分比較籠統，我會盡可能簡潔地介紹，因為有些產品上文已經提到過了。
Figma(Mac端，PC端）是我的必選之一，不為別的，就為它能在PC端使用。當然除了平臺效應，它還有很多其他優點。
個人比較青睞Figma的鋼筆工具，它操作十分便捷，尤其是在我想以像素規模制圖時。Figma的組件覆蓋處理起來也非常得心應手，在對話框面板中，Figma呈現出的不是單一的文本框，而是支持快捷修改的圖層，并可將更改視為重寫，這個功能比Sketch更容易，操作起來也更富有變化性。
最重要的是，Figma是一款很好的協作工具，有時甚至不僅僅是“工具”。在Figma中合作就像打開文件直接更改一樣簡單。因為它的操作是基于云的，文檔中的每個人都可以看到進行中的變化，而且能夠完全無縫對接。
最后要說的是，Figma的原型搭建和共享工具對于編程而言十分出彩，由于原型基于HTML語言，所以設計師可以和任何人分享創意。更何況它還是免費的呢！
重頭戲 Sketch（Mac端）終于登場了。至于Sketch為什么在屏幕設計中如此流行其實一點也不稀奇。當Bohemian推出該產品時，市場上根本沒有類似的精品。由于大量的插件和資源支持，Sketch是UX軟件中無可爭議的王者。
近期，Sketch的開發進程確越來越緩慢，在其最近更新的版本中著重推出的原型搭建功能其實已經被InVision收入囊中了。此外多年來Sketch還是只有Mac端的版本，這使得PC端的用戶很苦惱啊。
報告和文檔編繪階段
如果你的點子背后有一些好的想法及一些不錯的藝術品作支撐，那么無論你是外包，還是在專業工作室工作，抑或是在大公司設計部門工作，下一步都是一樣的，那就是要推銷自己。
不過很多設計師貌似都沒把這一點當回事兒，好像大多人認為總有人給介紹，或者自己的作品本身已經夠有說服力了。但實際上，好作品的創意只有設計師本人才能宣傳出來。
為了進行適當炒作或者加大宣傳效果，我一般會選擇蘋果的Keynote工具（Mac端）。曾有大型公司內部人士告訴我：商業人士都喜歡幻燈片。
Keynote與PowerPoint、谷歌幻燈片不同，它可以通過一些非常簡單、功能強大的動畫工具進行幻燈片放映。設計師可以利用這些優勢來真正地講述設計背后的故事。
就像版本控制一樣，文檔在設計工作中也成了越來越常見的要求，它會記錄設計中所有必要的細節，無論是為了商業營銷還是為了供業內人士參考都尤為重要。
在這一點上，我們團隊使用的是Atlassian公司的Confluence。它本質上是一個具有內部高級權限特性的wiki。設計者可以隨時查看界面屏幕和用戶流，業務團隊可以添加接受標準，開發人員可以使用頁面作為資源來進一步理解設計師的設計邏輯和意圖。
但個人并不大喜歡這款軟件，因為笨拙的用戶界面和難用的導航令人體驗有點差。但無論如何，它確實在我們工作過程中扮演著重要的角色。
當然說到文檔不得不提個人較為中意的Coda.io。Coda的任務是用一站式商店取代所有的文檔應用程序，可以支持豐富的文本文檔、公式、表格、圖表等操作。但個人認為一旦它退出了beta測試階段，將是一個巨大的打擊。
對此，個人還想說的是，文檔是團隊合作中一個非常重要的部分。這意味著即使你不在討論現場，你的想法和理念也一直存在，這使得任務在與其他隊員的交接過程中也會產生較少的摩擦。當然，事在人為，盡管做成這件事的方法有一萬種，但最關鍵的還是要開始動手。
開發者切換階段
在項目度過了最艱難的孵化時期已經小有輪廓時，接下來合作商可能會問：什么時候能竣工拿到產品呢？
為解決這個，我們還是得把目光拉回到Zeplin身上。在項目進行中，你的團隊可能使用Zeplin來進行一些操作，這是個能夠快速保持團隊風格的好去處，也是一個存儲和檢索關鍵資源的地方。
如果你開始發掘Zeplin中更高級的開發屬性，它的閃光點就爆露出來了，比如導出設計資源的代碼片段，或者以多個分辨率導出資源，這些都能真正加快開發進程。這意味著開發人員不必追著你討要素材來搭建，一切都能馬上傳輸。
為此我們還要再次提到InVision。InVision的運行比Zeplin更簡單，你可以簡單地突出或標明任何對象、組，InVision便能直接賦予它們屬性。這是一個確定大小、文字樣式和顏色的好方法。
你也可以導出資源，但是導出設置需要事先在Sketch中指定（Zeplin也有同樣的限制）。此外，InVision還支持一些代碼導出功能，但如果想在這方面具體比較InVision和Zeplin，可能需要詢問開發人員。
在這個問題上，Avocode很值得關注，因為它不僅僅支持Sketch，還支持Figma、Adobe XD和PS圖象處理軟件。它也是為了從設計中生成代碼而設計的。個人對Avocode的經驗很有限，但是如果開發者切換是你工作中的重頭，那么Avocode可能值得一試。
結語
恭喜你，到此我們走完了從早期概念到最終交付的整個設計過程。希望你已經發現了一些能以某種方式提升工作效率的應用程序。
不過還是要說，本文最大的缺陷在于并沒有討論研究階段。因為個人在一個專業的設計團隊工作，有專門的研究員所以沒有包括這一步。但它是任何好的UX誕生中的一個非常非常重要的部分，特別是在設計和開發的早期階段。
另一個要注意的問題是，這里列出的許多工具對私人而言都是免費的，但如果你與多個項目或團隊合作，就會變得非常昂貴。如果你有一些很棒的免費或者便宜的替代品，歡迎共同分享。
原文鏈接：https://blog.prototypr.io/ux-design-tools-for-2018-for-mac-and-pc-320a7be230c9
編譯組出品。編輯：郝鵬程
https://cn.vuejs.org/index.html
需要你做一下預習：https://cn.vuejs.org/v2/guide/index.html
數據驅動。如果我們要改變頁面效果，不再需要直接操作dom元素，只需要改變數據就好。數據改變之后框架會自動的幫我們進行頁面更新。
js最初的出現就是為了解決一個頁面中彈出一個提示，或者做一個簡單的計算。當時的環境下，瀏覽器可用的內存很小，為了解決這些問題，js語言必須簡單、沒有太復雜的數據結構、占用內存小。
但是隨著時間的發展，網頁的功能越來越復雜，需要的交互越來越多，js需要做的事情就更多。隨著時代的發展，瀏覽器的廠家也越來越多，每家瀏覽器對js語法的支持也不一樣。ECMA這個組織，建立一個統一的標準，在不停的制定一些語言語法的規范。
語言在發展的過程中，會吸取或者借鑒一下同行的一些優勢，來完善自身。
為了解決業務場景的復雜化，出現了很多框架或者開發模式：
jQuery是前期出現的一個神級的插件，它提供了一個標準的元素選擇方案，讓我們可以快速的做元素選擇。選中之后做后序的各種操作。它統一了各個瀏覽器中js語法的差異，使用jQuery寫代碼就不需要考慮各個版本瀏覽器中語法的差別
MVC框架Backbone，是早期經典的前端開發框架(jQuery+underscore.js+backbone.js+require.js)；做SPA單頁面應用程序開發
angular.js，是google的。分為兩類：angular.js和angular
react.js，是facebook出的框架，目前是全球使用最廣泛的。國內十家公司的react可能有十種寫法
vue.js，是一個個人項目，目前是國內使用比較廣泛的。國內十家公司的vue只能有一種寫法
https://cli.vuejs.org/zh/
npm install -g @vue/cli # 全局安裝vue腳手架，希望你成功剛才我初始化項目時選擇的內容
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No翻譯之后的中文版本
? Please pick a preset: Manually select features(選擇使用手動方式創建項目)
? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter(我現擇了四項：1. 手動選擇vue的版本【必選】，2.安裝babel【必選】，3.css預處理，后面可以選擇使用sass或者less等預處理語言，4.選擇了代碼規范性檢測，寫代碼不符合規范時報錯)
? Choose a version of Vue.js that you want to start the project with 2.x(選擇vue2)
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)（選擇使用sass）
? Pick a linter / formatter config: Basic（選擇lint規范性檢測的基礎配置）
? Pick additional lint features: Lint on save（在保存的時候檢測代碼）
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files（把每一個插件的配置文件單獨放置）
? Save this as a preset for future projects? No（以后都不使用這種配置）npm的配置文件，路徑在windows的c:/users/你的用戶名/.npmrc
registry=https://registry.npm.taobao.org/
init.author.email=你的郵箱
init.author.name=你的名字
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/vue中的路由插件，路由的作用是實現頁面跳轉。簡單點理解就是再瀏覽器中訪問指定的地址的時候展示的組件或者頁面內容
https://router.vuejs.org/zh/
路由分兩種模式：hash和history
區別：hash瀏覽器支持性好，不需要做額外的配置，可以直接使用；history模式再發布的時候需要做特殊的設置，在web服務器上做了配置之后才能使用；hash模式的路由，地址路徑中有#進行分割，#后面的表示路徑，history模式中沒有#
npm i vue-router # 安裝路由插件import Vue from 'vue'
import VueRouter from 'vue-router'
// 可以直接再組件中使用router-view和router-link等路由內置組件和對象($route和$router)
Vue.use(VueRouter)
const router=new VueRouter({
routes: [] // 路由表，或者叫路由數據，就是我們網文指定地址時候展示的組件
})參數傳遞之后，在對應的頁面使用$route屬性可以直接獲取參數
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB,抽空了看看
beforeEach
afterEach
children
在一個組件中放多個router-view,通過name屬性進行命名指定
在定義路由的時候使用components屬性指定展示的組件，可以通過設置屬性名為router-view的name屬性，屬性值為對應的組件的方式實現
new Router({
routes: [{
path: '/demo',
name: 'Demo',
components: {
default: ()=>import('.....'),
first: ()=>import('...')
}
}]
})https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB
beforeRouteUpdate(to, from, next) {
// 在當前路由改變，但是該組件被復用時調用
// 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
// 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
// 可以訪問組件實例 `this`
},https://cn.vuejs.org/v2/api/#%E5%85%A8%E5%B1%80-API
https://vuex.vuejs.org/zh/
vuex是vue中的一個狀態管理插件，通俗的講就是一個全局的數據管理工具。作用是實現項目中數據的集中式管理。
vuex是遵循單向數據流機制的：就是數據是單向流動的，分為三部分(view,state,action)
在view視圖中，通過dispatch派發一個action改變數據，數據改變之后view視圖重新渲染
vuex中的數據流向：在組件中通過dispatch派發一個action，在action中獲取數據，然后通過commit提交一個mutation改變數據，數據改變之后組件重新渲染
他們可以接收的參數為:
mapXxx('命名空間', [數組])
mapXxx('命名空間', {對象})
如果沒有命名空間空間參數，表示獲取根節點上的內容你有沒有用過vuex？
兩種回答方式：
vuex不是項目開發的時候必選的一個插件，但是在需要用的時候你要知道它的存在，它的作用就是顯示數據在不同的組件之間進行共享的。
手機app
管理后臺
https://lurongtao.gitee.io/felixbooks-interview2/
vue.config.js,所有的相關配置信息都在vue-cli的官網上:https://cli.vuejs.org/zh/config/#vue-config-js
https://webpack.docschina.org/ webpack官網，作為了解
module.exports={
publicPath: "./", // 表示打包之后資源文件的加載路徑
// 再做性能優化的時候，需要做到
/**
* 1. 路由文件的懶加載,使用 ()=> import('xxx')的方式引入,可以把路由組件單獨打包成js文件，在需要使用的時候再引入
* 2. 使用cdn的方式引入第三方資源庫
*
* **/
// configureWebpack，對webpack工具做額外的設置
configureWebpack: {
externals: {
// 屬性名是js源代碼中引入的時候使用的包名，屬性值是引入js文件后再瀏覽器中可以直接使用的名字
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
axios: "axios",
"element-ui": "ELEMENT",
},
},
// 腳手架內置了一個node的開發服務器，可以直接讓我們通過網絡路徑訪問代碼
devServer: {
// port: 998, // 改變開發服務器的端口號
proxy: {
// 訪問以/api開頭的地址時做一個代理轉發
// 代理只有再開發的時候有用，打包之后就沒用了
"/api": {
target: "https://papi.jiemian.com/page/api", // 目標服務器
ws: true, // 開啟ws
changeOrigin: true, // 改變origin
pathRewrite: { "^/api": "" }, // 路徑重寫，把/api替換成空白
},
},
},
};
是一個基于vue語法的服務器端渲染(SSR)框架。使用vue語法編寫多頁面應用程序，就是每一次路由跳轉打開的都是一個新的html文件。它解決了SPA單頁面應用程序的一個通病（最怕刷新）。
https://www.nuxtjs.cn/
yarn是facebook出的一款包管理工具，和npm一樣的功能
https://yarnpkg.com/
安裝使用
npm i yarn -g # 全局安裝yarn
yarn add xx # 安裝模塊，相當于 npm i xx
yarn remove xx # 刪除模塊，相當于 npm uninstall xx.nuxt打包文件、nuxt.config.js配置文件、package.json依賴配置文件、static靜態文件放在服務器
見的css樣式操作
div {
white-space: 'nowrap';
overflow: hidden;
text-overflow: ellipsis;
}我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
-webkit-line-clamp：限制一個塊元素顯示文本的行數(number)
設置或檢索伸縮盒對象的子元素的排列方式：
div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}.triangle {
width: 0;
height: 0;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid red;
}div {
display: flex;
justify-content: center;
align-items: center;
}div {
box-shadow: 2px 2px 2px 2px #f00 inset;
}border-radius可設置多個值；
一個值：表示四個圓角都相同；
二個值：第一個值為右上和左下圓角的值，第二個值為右下和左上圓角的值；
三個值：第一個值為左上圓角的值，第二個值為右上和左下圓角的值，第三個值為右下的值；
四個個值：第一個值為左上圓角的值，第二個值為右上，第三個值為右下的值，第四個為左下圓角的值；
div {
border-radius: 30px;
/*border-radius: 10px 30px*/
/*border-radius: 10px 20px 30px*/
/*border-radius: 10px 20px 30px 40px*/
}div {
text-shadow: 2px 2px 2px #F00;
}div:first-letter{
font-size: 50px;
color:#f00;
........
}div:first-line {
font-size: 50px;
color:#f00;
........
}兼容IE8及以下版本
div{
width: 200px;
height: 200px;
background: #00B7FF;
opacity: 0.5; /*標準游覽器*/
filter: alpha(opacity=50);/*IE低版本 8*/
}div img {
width:100%;
height:100%;
object-fit: cover;
}div::-webkit-input-placeholder {color: #999}
div:-moz-placeholder { color: #999}
div::-moz-placeholder {color: #999}
div:-ms-input-placeholder { color: #999}div{
filter: blur(1px);
}原文鏈接：https://segmentfault.com/a/1190000021509364
作者：FishStudy520
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
