IT課程 CSS基礎 026_顯示、可見性、效果
顯示
在CSS中，display屬性決定了元素在頁面中的顯示方式。
display: none;
隱藏元素，使其在頁面中不可見且不占據空間不影響佈局。 元素不會顯示在頁面上。示例：
.example{ display: none; } <div class="example">測試文本</div>ABC123效果： 
display: block;
將元素顯示為塊級元素。在頁面中會以塊的形式顯示，寬度默認是父容器的100%。塊元素是一個元素，占用了全部寬度，在前後都是換行符。示例：
.base{ background-color: deepskyblue; } .example{ display: block; } <a class="base example" href="">超鏈接測試</a> <br> <a class="base" href="">超鏈接測試</a>效果： 
display: inline;
將元素顯示為行內元素。元素在同一行內顯示，不會獨占一行，寬度由內容決定。內聯元素只需要必要的寬度，不強制換行。示例：
.base{ background-color: aquamarine; } .example{ display: inline; } <p class="base example">段落測試</p> <p class="base">段落測試</p>效果：
display: inline-block;
將元素顯示為行內塊級元素。元素在同一行內顯示，但可以設置寬度、高度等塊級元素的屬性。示例：
.example1{ display: inline-block; width: 100px; height: 100px; background-color: cornflowerblue; } .example2{ background-color: cornflowerblue; } <p class="example1">段落測試</p> <p class="example1">段落測試</p> <p class="example2">段落測試</p>效果：
可見性
在 CSS 中，可見性可以通過 visibility 屬性來控制。該屬性有兩個主要的取值：visible 和 hidden。
visibility: visible;
設置元素是可見的。示例：
.example{ visibility: visible; } <div class="example">測試文本</div>ABC123效果：
visibility: hidden;
設置元素是不可見的，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。示例：
.example{ visibility: hidden; } <div class="example">測試文本</div>ABC123效果：
效果
CSS 效果是指通過 CSS 屬性來改變元素的外觀或行為的效果。CSS 支持多種效果，包括：顏色、背景、邊框、字體、陰影、漸變、過渡、動畫等。
透明
在 CSS 中，透明度是指元素後面的背景被覆蓋的程度。透明度可以使用 opacity 屬性來設置。opacity 屬性的值範圍為 0.0 到 1.0，其中 0.0 表示完全透明，1.0 表示完全不透明。
示例：
.base{ width: 200px; height: 200px; background-color: #3498db;}.example{ opacity: 0.5; /* 50% 的透明度 */} <div class="base"></div> <br> <div class="base example"></div>效果： 
文字陰影
在 CSS 中，text-shadow 屬性用於為文本添加陰影。陰影可以是模糊的或清晰的，可以是任何顏色。
示例：
.example{ text-shadow: 5px 5px 10px rgba(243, 40, 40, 0.8); /* 2px 水平偏移，5px 垂直偏移，5px 模糊半徑，顏色 rgba(243, 40, 40, 0.8) */ font-size: 100px; } <div class="example">測試文本</div>效果：
漸變
在 CSS 中，漸變（gradient）是一種用於創建平滑色彩過渡的效果。漸變可以應用於元素的背景、邊框、文本等。
- 線性漸變（linear gradient）：從一個位置開始，向另一個位置進行過渡。
示例：
.example{ background: linear-gradient(to bottom, red, blue); /* 從上到下的漸變，紅色到藍色 */ height: 100px; } <div class="example"></div>效果： 
- 徑向漸變（radial gradient）：從一個點開始，向四周進行過渡。
示例：
.example{ background: radial-gradient(circle, red, blue); /* 圓形漸變，紅色到藍色 */ height: 100px; } <div class="example"></div>效果：
變形
在 CSS 中，變形是指改變元素的形狀、位置或大小的效果。
- 平移（Translate）：移動元素在平面上的位置。
- 縮放（Scale）：改變元素的大小。
- 旋轉（Rotate）：圍繞元素中心點旋轉。
- 傾斜（Skew）：沿著水平或垂直軸傾斜元素。
- 組合變換：將多個變換組合在一起。
示例：
.base { height: 100px; width: 100px; background-color: lightblue;}.example1 { transform: translate(50px, 20px); /* 水平移動50px，垂直移動20px */}.example2 { transform: scale(0.5); /* 放大元素為原來的1.5倍 */}.example3 { transform: rotate(45deg); /* 順時針旋轉45度 */}.example4 { transform: skew(50deg, 20deg); /* 水平方向傾斜30度，垂直方向傾斜20度 */}.example5 { transform: translate(50px, 60px) rotate(45deg) scale(1.5);} <div class="base example1"></div> <div class="base example2"></div> <div class="base example3"></div> <div class="base example4"></div> <div class="base example5"></div>效果：
