高科技｜帶你走進省地勘院自主研發的管道地災監測預警系

高科技｜帶你走進省地勘院自主研發的管道地災監測預警系統

省地勘院自主研發的管道地質災害監測預警系統融合了HTML5、三維傾斜攝影、大數據自學習自修正模型等多項先進技術，開發了地質災害監測設備管理、監測數據管理、預警預報、業務應用管理等多個功能子項，系統界面美觀、表達直觀，系統運行穩定，與傳統的災害監測預警系統相比，主要有如下特色:

地質災害監測預警系統布局設計人性化、表達直觀

省地勘院研發的地質災害監測預警系統基于HTML5技術，采用扁平化設計及響應式布局,提高了系統可用性、表達上更形象直觀，改進用戶的友好體驗。

與傳統地災預警系統對比

監測信息管理頁

系統界面首頁包含了：監測區域/點位列表、預警信息統計、現場情況上報、監測數據、監測數據分析、災害趨勢預測預報幾大子項，囊括了地質災害監測預警的主要工作內容，通過首頁可以清楚的判讀地質災害點的當前變化信息。

地質災害三維實景場景表達，監測預警信息表達更加形象直觀

單體化建模

地質災害三維實景場景及監測信息展示

采用“無人機傾斜攝影技術”對地質災害監測現場進行航飛，構建監測現場的三維實景場景，利用3Dmax軟件實現監測設備的單體化建模，通過坐標統一實現地圖窗口的二三維聯動，監測預警信息可以直觀清晰的在三維實景場景中表達，通過點擊三維場景中的監測站就可以顯示該站監測數據信息，使得監測預警信息表達更加形象直觀。

地質災害預警閾值的動態設置，大量減少錯報誤報

大數據分析模型

預警閾值的動態設置

傳統的地質災害監測預警閾值多為人為設定固定值的方式，為了從方法上規避人為設置固定閾值造成的大量誤報錯報現象發生，我院基于大數據自學習自修正模型，采用動態設置預警閾值，使監測預警更加科學、準確，大量減少錯報誤報頻率。

基于數值分析模型的災害發展趨勢預測分析

地質災害趨勢預測分析

根據監測的歷史數據，利用數據分析方法，分析預測災害未來一周的發展變化趨勢，提前預測預報，使得地質災害監測預警工作更加有意義。

研發“地質災害監測預警APP”，實現互動互通

研發的“地質災害監測預警APP”實現“現場+后臺”的互動，通過該系統可以實現監測數據查看、預警信息發布、現場信息反饋上報，同時還支持“地質醫生”專家在線服務，對災害信息答疑解難。

實時監測與專家審核

監測預警級詳情

預警情況上傳

該系統的研發為業主搭建了地質災害風險管控的信息化管理平臺，它可以為各管道分公司提供第一手監測數據，對加強管道地質災害風險控制，減少地質災害對管道危害等方面有著十分重要的意義。同時，也為我院在今后該領域的發展起到很好的參考作用，為下一步山區管道地質災害預警預報與動態力學技術研究、管道監測預警工程建設打下了堅實的基礎、積累了豐富的經驗。

言

7 月份，245 個國家氣象站日最高氣溫突破 7 月歷史極值；同時，疫情防控形勢向好，企業加快復工達產節奏，電力負荷屢創新高。煤電作為我國最主要的電源，用不足 50% 的裝機占比，生產了全國約 60% 的電量，滿足了超 70% 的高峰負荷需求。

煤電作為火力發電的一種，通過煤在燃燒時產生的熱能，將發電動力裝置轉換成電能。采用圖撲軟件的 2D、3D 和 GIS 可視化技術結合傾斜攝影和數字孿生技術，搭建出火電廠不同機組區域、輸煤區域、化學水處理區域、公用系統區域、生活辦公區域、主變及升壓站區域的三維可視化系統。利用泛在感知、自適應、智能融合與互動化，讓火電廠在工程設計、生產調度、過程監控、故障診斷、運營管控、可視化運維等不同環節實現智慧管理。

HT for Web GIS 支持對不同地圖瓦片服務或數據、航拍傾斜攝影實景的 3DTiles 格式數據以及城市建筑群等不同的 GIS 數據的加載，同時，結合 BIM 數據輕量化、三維視頻融合以及 2D 和 3D 的無縫融合等技術優勢，在 GIS 系統中對海量的 POI 數據、交通流量數據、規劃數據，現狀數據等進行多樣化展示。

基于 HT for Web 和 GIS 技術的智慧火電廠通過獲取三維場景數據實現火電廠的數字孿生。基于數字孿生的三維技術，將物聯網、人工智能、大數據等新 ICT 技術進行整合，對火電廠安全模塊、環保模塊、生產模塊進行全方位的數字化建設，建設成新一代科技、高效、安全、綠色、健康的火電廠。基于天氣數據進行氣象仿真，根據具體的需求，展現雨、雪等不同的氣象數據三維仿真效果。也可接入氣象數據，在惡劣氣候來臨前做好應對措施。

火電廠三維場景數據獲取主要有航拍建模和人工建模兩種方式。

航拍建模，也稱傾斜攝影實景三維。通過從一個垂直、四個傾斜、五個不同的視角同步采集影像，以大范圍、高精度、高清晰的方式全面感知復雜場景，獲取到豐富的建筑物頂面及側視的高分辨率紋理。不僅能真實反映地物信息，還能通過定位、融合、建模等技術，生成具有地理坐標系信息的三維廠區模型。航拍建模可以準確的和GIS 匹配，OSGB 模型數據具有多細節層次（Level of Detail, LOD），系統可以根據用戶瀏覽時和場景的距離顯示不同精度的 LOD 層級模型。

人工建模，使用 3dsMax、Maya、C4D 等建模軟件，基于影像數據、CAD 平面圖或者拍攝圖片估算建筑物輪廓與高度等信息進行人工建模。但建筑紋理與實際效果偏差較大，生產過程也需要大量人工參與；數據制作周期較長，時效性較低。人工建模要和 GIS 匹配需要人工進行空間矯正配準。

點擊查看航拍 VS 人工建模區別

性能上，傾斜攝影適用于大面積復雜廠區或建筑群，可快速通過航拍采集的數據生成場景，避免花費大量時間進行手工建模。通過層級方式加載，不受性能限制，可以承載人工建模所無法承載的場景規模。
效果上，傾斜攝影所見即所得，可展示所有拍攝到的物體，但效果上不如人工建模，拉近后會存在模型貼圖模糊，模型細節丟失等問題。同時傾斜攝影的靈活性也不如人工建模，如需對單棟模型實現點擊事件，還需要進行單體化處理，并且無法從模型層面實現一些動畫效果，例如拆解、透視、零部件拆解動作等。
成本上，航拍大規模成圖加上從傾斜影像批量提取及貼紋理的方式，能夠有效的降低三維建模成本，提升模型的生產效率，降低了三維模型數據采集的經濟代價。
工期上，通常 1-5 平方公里面積，采集數據+生成模型在 1-2 周左右，人工建模則是取決于建筑/設備數量和復雜程度，通常單個廠區建模周期在 1-4 個月之間。

實際應用中，用戶可根據自身需求選擇合適的方式，也可以兩者相結合實現。例如本次案例則采用傾斜攝影+人工建模+ BIM 模型三種做法疊加對火電廠進行全方位展示。

效果展示

透視效果

通過人工建模的方式，運用圖撲軟件虛擬仿真技術，按照智慧火電廠機組區域的內部布局，1：1 制作 3D 可視化仿真互動模型，內部設備和建筑一覽無余，便于運維查看。

對于智慧火電廠而言，仿真建模展示遠不能滿足需求。利用圖撲軟件結合 GIS 進行人員、車輛、設備的定位、監控管理，分析各類監控點位的布控合理性，全面監控廠區的生產狀態，才是廠區智能化轉型的重點。在安全方面，對廠區、消防設備等進行數字孿生；在環保方面，對 NO2、汞、PM2.5 等有毒有害物質排放情況進行分析，指導火電廠的環境治理工作，促進廠區的綠色化轉型。

漫游巡檢

火電廠電力巡檢人員需要對運行的機器、工藝設備、管道、儀器儀表等進行規范的檢查，去發現和專業識別隱患，處理隱患，上報隱患，讓設備的故障消失在萌芽狀態。通過巡檢模擬人或者巡檢車巡檢的過程，經過設備時可以停留查看設備信息。漫游巡檢功能根據增設的多類型巡檢內容和多條巡檢路徑，可選用第一人稱視角漫游或者無人機視角漫游進行全時段自動巡視，巡視速度可自由選擇。

第一人稱視角漫游可帶來沉浸式體驗。無人機視角漫游從空中漫游查看，展示火電廠的宏大，帶來震撼觀感。滿足不同類型資產的運維管理特性。

安全模塊

安全管理是企業平穩正常運行的根本，利用云計算、大數據、虛擬仿真、北斗定位等技術提升安全管理水平，提高安全管理效率是現代化電廠的管理重點。通過在地圖上顯示各種圖標對應于標簽綁定的人或物，對標簽進行實時監控，并在地圖中顯示標簽的當前位置，進行實時管控。

在圖撲軟件 2D 面板展示累計安全運行時間，廠區綜合信息，如火災監測點位、門禁點位、廠區人員、廠區車輛、電子圍欄、攝像頭信息。點擊底部菜單的火災監測點位可查看整個火電廠的火災監測點分布情況，結合北斗、UWB 等系統，精準定位起火點，有效縮短救援時間。

火災預演

通過動態箭頭標示逃生路線，指向逃生出口方向，可模擬多條疏散路線并預測時間，測算出最佳逃生路線。

火電廠內人員密集度高，地形復雜，因此疏散難度較大。但疏散時間的長短直接關系到人員的安全，通過將 HT for Web 和 BIM 結合，借助傳感設備和射頻識別技術確定人員逃生數據，以 Hightopo 的三維可視化特點，將真實的疏散環境和疏散情況進行還原，與廠區真實情況切合度高。因此，在火災逃生中，就能夠有效提高員工逃生效率。

人員管理

采用圖撲可視化管理廠區總人數，汽機、輸煤、鍋爐房人員信息分別統計，通過 3D 場景內的人員快捷導航功能快速定位人員。人員定位有助于管理者調動各區域員工，加強全局管理，提升企業的智能化水平和運行效率。

可基于 UWB 定位基站或其他定位硬件基礎，在三維場景中實現廠內員工實時定位可視化功能。在集控中心部署圖撲軟件可視化管理系統，管理人員可以實時監控廠區在崗人員的位置，通過場景交互查看員工信息、行動軌跡等數據。員工可隨身攜帶定位卡裝置，如遇危險可手動發出 SOS 信息。集控中心運維在圖撲軟件可視化系統內看到求救信息可第一時間做出反應。

門禁管理

門禁安全管理集圖撲可視化技術、AI 人臉識別技術、微機自動識別技術、現代安全管理措施為一體，它涉及電子，機械，光學，計算機技術，通訊技術，生物技術等諸多新技術，能有效識別記錄通行人員和車輛信息。在圖撲可視化大屏可查看門禁分布區域、當日通過門禁的人數、攔截人數、攔截原因，構建網格化社會治安防控體系，提高對各類事故、案件和突發事件防范和應急處理能力。

門禁系統還可集成其他專業系統樓宇自動化、閉路監控、防盜及消防報警等其他系統協調聯動，從而使安防整體性和安全性得到提升，例如：

攝像頭管理

攝像頭是廠區實現主動式防御的關鍵，列表顯示在線、離線攝像頭數量，可根據名稱搜索查看攝像頭位置。圖撲軟件查詢界面采用事件機制進行界面局部更新，避免 FPS 的游戲方式，過多進行無意義的界面刷新，避免桌面卡頓和手機發燙等問題。

點擊 3D 場景底部攝像頭圖標可查看廠區智能攝像頭分布，把攝像頭疊加 AI 的算法，能夠進行人員行為和物體的識別，讓普通攝像頭會思考。可視化界面接入監控系統，顯示當前廠區場景。

圖撲軟件產品 HT for Web 作為基于 HTML5 標準的組件庫，可以無縫結合 HTML5 各項多媒體功能，支持集成各類視頻資源形成統一的視頻流，可在 2D、3D 態勢地圖上標注攝像頭對象并關聯其視頻信號源，通過場景交互來調取相應監控視頻，滿足運維人員對場景進行實時態勢感知、歷史數據回溯比對、應急處理預案等監測需求。

圖撲軟件還支持視頻融合，將 2D 視頻圖像融合到場景的 3D 模型中，為用戶提供直觀的視頻圖像和簡單的視圖控制。通過室內監控視頻與三維場景疊加展示，可如臨其境查看現場情況。并可實現關鍵路徑自動視頻巡檢，重點區域關注目標快速鎖定等高級功能，為日常管理和突發事件的處理提供直觀準確的協助。

電子圍欄

火電廠的 3D 界面內用黃色表示廠區的各個電子圍欄位置，并在人員入侵時彈出提示框，提醒集控中心運維及時通知入侵者離開。利用圖撲軟件 2D 面板顯示違規記錄，如違規時間、事件、處理狀態，后續有針對性地加強管理。點擊面板中電子圍欄后的小眼睛可將鏡頭拉近查看，也可根據需要手動繪制電子圍欄區域。

電子圍欄是目前較為先進的周界防護報警系統，采用了先進的“阻擋為主，報警為輔”的周界安防理念，集“威懾、阻擋、報警、安全”于一身，可對人流態勢風險進行分析研判。圍欄分為永久性圍欄和臨時性圍欄，永久性圍欄在火電廠項目中出現在汽輪機、變壓器、升壓站等區域；臨時性圍欄出現在廠區內臨時施工或者“兩票”維修區。

車輛管理

火電廠作為一個密集多徑場所，可采用 UWB、Wi-Fi、藍牙、紅外線、超寬帶、RFID、ZigBee、動作捕捉、超聲波等技術配合北斗衛星導航系統，收集車輛運行軌跡。將圖撲可視化系統和路網系統結合，達到縮短車輛旅行時間、降低行車延誤、減少車輛空駛和亂停、保障行車安全、提高場內道路通行能力的目的。

廠區車輛定位管控系統具備車輛基礎信息查詢、車輛實時定位跟蹤、車輛實時位置查找、車輛安全狀態查詢、車輛實時巡查盤點、車輛異常報警聯動等功能，可實現廠內車輛實時監測和安全預警智能化，提車輛智能化管理效率。

在定位范圍內車輛發生故障，通過報警按鈕能夠及時向地面調度室發送報警信息；根據實際情況，預告確定地點和行動軌跡路線等。

安全四色圖

結合火電廠自身實際繪制企業安全風險分布圖，從組織、制度、技術、應急等方面對不同等級的安全風險采取有針對性的管控措施，確保安全風險始終處于受控范圍內。在圖撲軟件數字孿生體內將火電廠安全風險等級從高到低劃分為重大風險、較大風險、一般風險和低風險，分別用紅、橙、黃、藍四種顏色標示。通過廠區安全四色圖分析，對重點安全防范區域的消防設備和監控設備的布控具有重要的指導意義。

環保模塊

火電廠對環境的污染主要包括空氣污染、廢水污染、工業固廢污染、工業噪聲污染、電磁污染。鍋爐的煙氣通過高煙囪排入大氣，通過圖撲可視化系統統計監測點位的煙塵、NO2、汞排放、PM10、PM2.5、SO2 正常和異常指標數據，加強指標異常區域的環境管理，構建綠色廠區。

圖撲軟件運用圖形化的手段清晰有效地將數據信息進行解讀和傳達，分別利用柱狀圖、面積圖、折線圖等統計每月 NO2、PM10、PM2.5、SO2 的排放量，幫助我們發現其中的規律和特征，挖掘數據背后的價值。通過各種不同數據源之間的數據傳遞、轉換、凈化、集成等功能，實現環境數據的統一存儲、統一展現。

點擊底部菜單的每類排放物，會在 3D 場景內相應分布區域出現圖標，雙擊 3D 場景內相應的小圖標可彈出 2D 面板查看各種有毒有害物質的每小時變化情況。通過數據層面的整理提煉，將分散在各個“信息孤島”中的有效信息資源進行全面整合，全面支持數據共享、統一管理和分析決策。

AQI 云圖

用綠、黃、橙、紅、紫表示空氣污染的輕重程度，加強重污染區域的環境治理和人員準入，保障員工身體健康。

通過跨平臺的標準數據協議，將各個獨立分散的數據庫或信息系統中的有價值的數據抽取到圖撲可視化系統，實現多業務處理以及管理決策層的數據共享。

生產模塊

火力發電的原理是在燃燒時加熱水生成蒸汽，將燃料的化學能轉變成熱能，蒸汽壓力推動汽輪機旋轉，熱能轉換成機械能，然后汽輪機帶動發電機旋轉，將機械能轉變成電能。圖撲軟件采用輕量化三維建模技術，數字孿生火電廠的發電流程，帶來沉浸式觀感。

三維工藝流程

采用三維組態的方式實現電廠關鍵工藝流程上的設備連接，一方面可監控重要設備的運行信息；另一方面，用三維組態展示出燃煤發電廠的主要發電工藝：輸煤棧橋→篩煤機→碎煤機→輸煤皮帶→給煤機→磨煤機→鍋爐→汽輪機→發電機→主變→升壓站→電網……

相較于 InTouch/IFix/WinCC 這些傳統組態軟件，圖撲基于 Web 的平臺更適合 C/S 向 B/S 轉型的大趨勢，支持快捷的數據綁定方式，豐富的可視化組件可用于快速創建和部署。同傳統界面相比，圖撲滿足工業物聯網現代化的、高性能的、跨平臺（桌面 Mouse /移動 Touch /虛擬現實 VR）的圖形展示效果及交互體驗。

設備預警

通過列表顯示一級、二級、三級設備預警信息，可分類查看，防范設備高溫暴曬運行帶來的爆炸、傾覆、滯留風險。相較于人工預警，通過圖撲可視化平臺預警，精簡流程，監測數據一旦觸發設定的預警指標，集控中心運維可實時收到預警提示，為轉移危險區域人員爭取寶貴時間。同時，加強在役機組運行管理，減少非計劃停機、受阻情況，保障機組穩發滿發。

在高溫天氣可使用 “溫度傳感器+Zigbee”溫度監測系統，準確地采集關鍵設備及設備關鍵部位的溫度信號，通過智能網關，接入光纖網絡，實現網絡及數據共享。通過控制中心的無線測溫監測系統，超溫部位及設備精準定位，超溫報警，保證關鍵設備壽命及生產連續性，減少及避免潛在事故的風險。

地下管網

采用透視效果呈現火電廠三維地下管網在廠區分布情況，了解管道布局和走向，避免地下作業時損壞管子。結合各種信息傳感器、射頻識別技術、紅外感應器、激光掃描器等監測管道健康狀況，避免爆管、管裂等情況的發生。

升壓站建設流程

圖撲軟件支持將 BIM 建筑數據疊加到 3D 場景中，也支持將 BIM 模型疊加到地圖場景中，實現 BIM + GIS 的結合展示。將 BIM 技術應用到升壓站建設中，涵蓋：規劃、設計、施工及運維管理等各個階段。結合 BIM 技術，對升壓站的建筑結構、基礎設施系統內設備進行三維模擬呈現，直觀逼真。

通過 HT 引擎進行渲染，仿真還原升壓站建設流程：地基建筑→圍墻→變壓器區→刀閘區→開關區→鋼塔→線纜，實現智能施工管控。可依據需要選擇正常速度、2 倍速、4 倍速等不同播放速度查看建設過程，查找不合理環節。結合圖撲軟件還能實現對一次設備（變壓器、斷路器、隔離開關等直接用于生產和使用電能的設備）運行工況的監視、測量、控制及調節等。

圖撲軟件還提供了 BIM 模型轉 HT 圖元的功能，可對 BIM 文件做輕量化處理，確保場景在 Web 中高效流暢地加載運行，降低開發成本。

機組數據監測

點擊底部菜單的機組數據監測，可在三維場景內查看機組負荷、汽機轉速、給水流量等機組主要參數的實時數據，進行電力設備狀態檢修、廠站智能運行、作業機器人替代、大數據輔助決策等，開展火電廠的數字化、無人化管理。

圖撲軟件將 2D 和 3D 無縫融合，通過圖表的數據綁定，利用不同樣式的圖表統計方式統計安全運行天數、廠區面積、總裝機容量、機組實時功率；日發電量、月發電量、總發電量數據；供電煤機、發電煤耗、負荷率等生產指標；鍋爐機組和汽輪發電機組等設備運行效率。采用柱狀圖和折線圖結合的方式展示日煤耗、月煤耗、總煤耗，了解廠區基本運行狀況，保證火電廠運行的安全性、經濟性和電能的質量。

總結

火電廠設備設施、工藝流程的智能化升級，提高了電力系統靈活感知和高效生產運行能力。但是，通過火電廠實現電力系統削峰填谷，滿足 5% 的峰值負荷需要投資 4000 億，而通過虛擬電廠，在建設、運營、激勵等環節投資僅需 500-600 億元。

虛擬電廠是滿足新型電力系統需求側互動響應能力的重要工具，其提供的新能源電力與傳統能源和儲能裝置集成的模式，能對大電網呈現出穩定的電力輸出特性。挖掘了各品類電源頂峰發電潛力，優化跨區域電網間的開機備用、錯峰支援、余缺調劑。

新能源系統分散化、扁平化、去中心化的趨勢特征日益明顯，分布式能源快速發展，系統模式由大基地大網絡為主逐步向與微電網、智能微網并行轉變，推動新能源利用效率提升和經濟成本下降。

《中國電力發展報告 2022》建議，通過多能互補形式，推進新能源基地化開發，探索建立新能源基地有效供給和有效替代新模式。推廣應用多時間尺度功率預測、智慧調控等技術，有效提升新能源可靠支撐能力和消納水平。2022 年上半年，水電、核電、風電和太陽能發電等清潔能源發電量超 1.2 萬億千瓦時。

智慧電網要求建設智能調度體系，實現源網荷儲互動、風光一體等多能協同互補及用能需求智能調控，合理布局“新能源+儲能”一體化友好型新能源電站。

更多行業應用實例可以參考圖撲軟件官網案例鏈接：https://www.hightopo.com/demos/index.html

TML 是用來描述網頁的一種語言。

HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁

HTML5 是最新的 HTML 標準。

HTML5 是專門為承載豐富的 web 內容而設計的，并且無需額外插件。
HTML5 擁有新的語義、圖形以及多媒體元素。
HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建。
HTML5 是跨平臺的，被設計為在不同類型的硬件（PC、平板、手機、電視機等等）之上運行。

CSS 是一種描述 HTML 文檔樣式的語言。

CSS 描述應該如何顯示 HTML 元素。
CSS 用于控制網頁的樣式和布局。
CSS3 是最新的 CSS 標準。
CSS3 被拆分為"模塊"。主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定制字體、多背景圖、文字或圖像的變形處理（旋轉、縮放、傾斜、移動）、多欄布局、媒體查詢等。

1 標注效果

要實現如下效果：

HTML5:

<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>離<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
鄉<rt>xiāng</rt>音<rt>yīn</rt>無<rt>wú</rt>改<rt>gǎi</rt>鬢<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。

2 與文本換行相關的屬性

	使用說明
line-break	用于指定如何（或是否）斷行。除了Firefox，其它瀏覽器都支持。取值包括： auto，使用缺省的斷行規則分解文本； loose，使用最松散的斷行規則分解文本，一般用于短行的情況，如報紙； normal，使用最一般的斷行規則分解文本； strict，使用最嚴格的斷行原則分解文本。
word-wrap	允許長單詞或URL地址換行到下一行。所有瀏覽器都支持。取值包括： normal，只在允許的斷字點換行（瀏覽器保持默認處理）； break-word，在長單詞或 URL 地址內部進行換行。
word-break	定義文本自動換行。Chrome和Safari瀏覽器支持不夠友好。取值包括： normal：為默認值，允許在字內換行; keep-all,對于中文、韓文、日文，不允許字斷開； break-all，與normal相同，允許非亞洲語言文本行的任意字內斷開。
white-space	設置如何處理元素中的空格。所有瀏覽器都支持。取值包括： normal，默認處理方式； pre，顯示預先格式化的文本，當文字超出邊界時不換行； nowrap，強制在同一行內顯示所有文本，合并文本間的多余空白，直到文本結束或者遭遇br對象； pre-wrap，顯示預先格式化的文本，不合并文字間的空白距離，當文字碰到邊界時發生換行； pre-line，保持文本的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。

3 text-shadow

要實現的效果：

CSS3：

p {
    text-align: center;
    font: bold 60px helvetica, arial, sans-serif;
    color: #fff;
    text-shadow: black 0.1em 0.1em 0.2em;
}

要實現的效果：

CSS3：

p {
    text-align: center;
    font:bold 60px helvetica, arial, sans-serif;
    color: red;
    text-shadow: 0 0 4px white, 
        0 -5px 4px #ff3, 
        2px -10px 6px #fd3, 
        -2px -15px 11px #f80, 
        2px -25px 18px #f20;
}

要實現的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: -1px -1px white,  
        1px 1px #333;
}

要實現的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: 1px 1px white,  
        -1px -1px #333;
}

4 border的transparent屬性

要實現的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

要實現的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

要實現的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

要實現的效果：

CSS3：

#demo {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;

}

5 transform: rotate

要實現的效果：

CSS3和HTML5：

<style type="text/css">
.bubble {
    width: 200px; /*定義框大小，可忽略，讓消息框自由收縮*/
    height: 50px;
    background:hsla(93,96%,62%,1); /*定義背景色，必須與下面箭頭背景色一致*/
    padding: 12px;  /*增加補白，防止消息文本跑到框外*/
    position: relative; /*定義定位包含框，方便定位箭頭*/
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;   /*圓角*/
}
.bubble:before { 
    content: "";   /*不顯示任何內容*/
    width: 0;  /*定義箭頭內容區大小*/
    height: 0;
    position: absolute;  /*絕對定位*/
    z-index:-1;  /*顯示在消息框下面*/
}
.bubble.bubble-left:before {
    right: 90%;
    top: 50%;
    
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    transform: rotate(-25deg);  /*定位箭頭傾斜角度*/
    /*定義箭頭長短、粗細*/
    border-top: 20px  solid transparent;
    border-right: 80px  solid hsla(93,96%,62%,1);
    border-bottom: 20px  solid transparent;

}

div {
    margin:50px;
}

<div class="bubble bubble-left">左側消息提示框<br>class="bubble bubble-left"</div>

6 background: repeating-linear-gradient

要實現的效果：

CSS3：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
    background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
    background-size: 100% 30px;
    position: relative;
}
body:before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 4px;
    border-left: 4px double #FCA1A1;
    position: absolute;
    left: 30px;
}

需要實現的效果：

CSS3：

.box {
    background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px);
    color: #fff;
    padding: 12px 24px;
}

7 實現選項卡效果

<script>
function setTab(cursel,n){
	    for(i=1;i<=n;i++){
	        	var menu=document.getElementById("tab_"+i);
	        	var con=document.getElementById("con_"+i);
	        	menu.className=i==cursel?"hover":"";
	        	con.style.display=i==cursel?"block":"none";
	    }
}
</script>

<div id="tab">
    <div class="Menubox">
        <ul>
            <li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
            <li id="tab_2" onclick="setTab(2,4)">搞笑</li>
            <li id="tab_3" onclick="setTab(3,4)">美女</li>
            <li id="tab_4" onclick="setTab(4,4)">攝影</li>
        </ul>
    </div>
    <div class="Contentbox">
        <div id="con_1" class="hover" ><img src="images/1.png" /></div>
        <div id="con_2" class="hide"><img src="images/2.png" /></div>
        <div id="con_3" class="hide"><img src="images/3.png" /></div>
        <div id="con_4" class="hide"><img src="images/4.png" /></div>
    </div>
</div>
</body>

8 表格隔行添加背景色

CSS3：

tbody tr:nth-child(2n) {
    background-color: #f5fafe;
}

9 border-radius

圓角表格的CSS3：

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

10 border-spacing

單線表格的CSS3：

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
}

11 box-shadow

設計圖片翹邊陰影效果：

CSS3：

.box {
    width: 980px;
    clear: both;
    overflow: hidden;
    height: auto;
    margin: 20px auto;
}
.box li {
    background: #fff;
    float: left;
    position: relative;
    margin: 20px 10px;
    border: 2px solid #efefef;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
}
.box li img {
    width: 290px;
    height: 200px;
    margin: 5px;
}
.box li:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    left: 21px;
    background: transparent;  /*透明背景*/
    z-index: -2;   /*顯示在照片的下面*/
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);  /*添加陰影*/
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(-12deg) rotate(-6deg);   /*變形并旋轉陰影，讓其翹起*/
    -webkit-transform: skew(-12deg) rotate(-6deg);
    -moz-transform: skew(-12deg) rotate(-6deg);
    -os-transform: skew(-12deg) rotate(-6deg);
    -o-transform: skew(-12deg) rotate(-6deg);
}
.box li:after { /*在左側添加翹邊陰影*/
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    right: 21px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(12deg) rotate(6deg);
    -webkit-transform: skew(12deg) rotate(6deg);
    -moz-transform: skew(12deg) rotate(6deg);
    -os-transform: skew(12deg) rotate(6deg);
    -o-transform: skew(12deg) rotate(6deg);
}

<ul class="box">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
</ul>

ref

《HTML5+CSS3+JavaScript從入門到精通（實例版）》

-End-

在線咨詢

上一篇：Error 404- 請讓我們充滿惡意地告別IE
下一篇：2016互聯網變革教育的實踐路徑高峰論壇

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

高科技｜帶你走進省地勘院自主研發的管道地災監測預警系

言

效果展示

總結

1 標注效果

2 與文本換行相關的屬性

3 text-shadow

4 border的transparent屬性

5 transform: rotate

6 background: repeating-linear-gradient

7 實現選項卡效果

8 表格隔行添加背景色

9 border-radius

10 border-spacing

11 box-shadow

您的項目需求