CSS常用示例100+專欄目錄

本專欄記錄的是經常使用的CSS示例與技巧，主要包含CSS布局，CSS特效，CSS花邊信息三部分內容。其中CSS布局主要是列出一些常用的CSS布局信息點，CSS特效主要是一些動畫示例，CSS花邊是描述了一些CSS相關的庫、知識點、理論篇章等。 因為常用所以記錄、展示、分享，希望能給您帶來幫助。

css實戰中，怎么繪制天窗揚起合上的效果呢？主要利用了transform: rotate3d(1, 0, 0, 0turn);的神奇功能，同時設置perspective達到透視效果 。

效果圖

源代碼

/*
* @Author: 大劍師蘭特（xiaozhuanlan），還是大劍師蘭特（CSDN）
* @此源代碼版權歸大劍師蘭特所有，可供學習或商業項目中借鑒，未經授權，不得重復地發表到博客、論壇，問答，git等公共空間或網站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-23
*/
<template><div class="container"><div class="top"><h3>天窗揚起合上的效果</h3><div class="author">大劍師蘭特, 還是大劍師蘭特，gis-dajianshi</div></div><div class="dajianshi"><div class="content"></div></div></div>
</template><style scoped>.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: burlywood;color: #fff;}.dajianshi {height: 200px;width: 400px;margin: 100px auto;background: brown;/* 設置perspective達到透視效果 */perspective: 400px;perspective-origin: top;}.content {width: 100%;height: 100%;background: lightcyan;transform: rotate3d(1, 0, 0, -0.25turn);transform-origin: top left;transition: all 1s;}.dajianshi:hover .content {transform: rotate3d(1, 0, 0, 0turn);}
</style>

CSS基礎知識點

1.CSS樣式表
2.基礎選擇器：（1）標簽選擇器，（2）類選擇器，（3）id選擇器，（4）通配符選擇器
3.復合選擇器：（1）后代選擇器，（2）子選擇器，（3）并集選擇器，（4）交集選擇器，（5）偽類選擇器。
4.字體樣式屬性：（1）字體大小font-size，（2）字體類型font-family，（3）字體粗細font-weight，（4）字體風格font-style
5.文本外觀樣式：（1）設置文本顏色color，（2）word-spacing，（3）letter-spacing，（4）line-height，（5）text-transform，（6）text-decoration，（7）text-align，（8）text-indent，（9）white-space
6.文本外觀屬性：（1）text-shadow，（2）overflow
7.CSS層疊性、繼承性及優先級
8.邊框介紹
8.1邊框屬性：（1）border-style，（2）border-width，（3）border-color，（4）border-radius
8.2內邊距屬性
8.3外邊距屬性
8.4box-shadow
9.背景屬性
9.1背景顏色
9.2背景圖片：（1）background-repeat，（2）background-position，（3）background-attachment，（4）background-size，（5）background-origin，（6）background-clip，（7）復合寫法，（8）不透明
10.元素的類型
11.span標簽
12.display
13.表格標簽：（1）table標簽，（2）tr標簽，（3）td標簽，（4）th標簽，（5）表格邊框，（6）折疊邊框，（7）表格寬度和高度，（8）表格邊框間距border-spacing，（9）表格標題位置caption-side
14.表單
14.1創建表單：（1）標簽
14.2表單控件：（1）input控件，（2）input/標簽的type屬性，（3）textarea控件，（4）select控件
15.CSS盒子模型：（1）邊框（border），（2）內邊距(padding)，（3）外邊距（margin），（4）清除內外邊距，（5）盒子模型
16.浮動布局：（1）傳統網頁布局，（2）浮動簡介，（3）浮動特性，（4）清除浮動
17.定位布局：（1）定位組成，（2）相對定位relative，（3）絕對定位absolute，（4）子絕父相，（5）固定定位fixed，（6）定位疊放次序z-index，（7）定位拓展
三.其他
1.圓角邊框：（1）圓形，（2）圓角矩形
2.盒子陰影
3.文字陰影
4.用戶界面樣式：（1）鼠標樣式 cursor，（2）輪廓線 outline，（3）防止拖拽文本域 resize，
5.過渡 transition

結尾語

CSS的應用無處不在，希望某個片段就能幫助你，歡迎學習GIS的朋友一起交流。
《 Openlayers 綜合示例200+ 》，
《 leaflet示例教程100+ 》，
《 Cesium示例教程100+》，
《MapboxGL示例教程100+》。