---
title: "IT课程 CSS基础 026_显示、可见性、效果"
date: 2024-02-01T22:00:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "hello css", "css基础", "css显示", "css可见性", "css效果"]
categories: ["学习", "CSS基础"]
canonical: https://www.zhaojian.net/it-course-css-026/
author: 赵健
---
### 显示
在CSS中，`display`属性决定了元素在页面中的显示方式。
##### `display: none;`
隐藏元素，使其在页面中不可见且不占据空间不影响布局。 元素不会显示在页面上。
示例：
```css
.example{
display: none;
}
```
```html
测试文本
ABC123
```
效果：
##### `display: block;`
将元素显示为块级元素。在页面中会以块的形式显示，宽度默认是父容器的100%。
块元素是一个元素，占用了全部宽度，在前后都是换行符。
示例：
```css
.base{
background-color: deepskyblue;
}
.example{
display: block;
}
```
```html
超链接测试
超链接测试
```
效果：
##### `display: inline;`
将元素显示为行内元素。元素在同一行内显示，不会独占一行，宽度由内容决定。
内联元素只需要必要的宽度，不强制换行。
示例：
```css
.base{
background-color: aquamarine;
}
.example{
display: inline;
}
```
```html
段落测试
段落测试
```
效果：
##### `display: inline-block;`
将元素显示为行内块级元素。元素在同一行内显示，但可以设置宽度、高度等块级元素的属性。
示例：
```css
.example1{
display: inline-block;
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
.example2{
background-color: cornflowerblue;
}
```
```html
段落测试
段落测试
段落测试
```
效果：
### 可见性
在 CSS 中，可见性可以通过 `visibility` 属性来控制。该属性有两个主要的取值：`visible` 和 `hidden`。
##### `visibility: visible;`
设置元素是可见的。
示例：
```css
.example{
visibility: visible;
}
```
```html
测试文本
ABC123
```
效果：
##### `visibility: hidden;`
设置元素是不可见的，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
示例：
```css
.example{
visibility: hidden;
}
```
```html
测试文本
ABC123
```
效果：
### 效果
CSS 效果是指通过 CSS 属性来改变元素的外观或行为的效果。CSS 支持多种效果，包括：颜色、背景、边框、字体、阴影、渐变、过渡、动画等。
##### 透明
在 CSS 中，透明度是指元素后面的背景被覆盖的程度。透明度可以使用 `opacity` 属性来设置。`opacity` 属性的值范围为 0.0 到 1.0，其中 0.0 表示完全透明，1.0 表示完全不透明。
示例：
```css
.base{
width: 200px;
height: 200px;
background-color: #3498db;
}
.example{
opacity: 0.5;
/* 50% 的透明度 */
}
```
```html
```
效果：
##### 文字阴影
在 CSS 中，text-shadow 属性用于为文本添加阴影。阴影可以是模糊的或清晰的，可以是任何颜色。
示例：
```css
.example{
text-shadow: 5px 5px 10px rgba(243, 40, 40, 0.8);
/* 2px 水平偏移，5px 垂直偏移，5px 模糊半径，颜色 rgba(243, 40, 40, 0.8) */
font-size: 100px;
}
```
```html
测试文本
```
效果：
##### 渐变
在 CSS 中，渐变（gradient）是一种用于创建平滑色彩过渡的效果。渐变可以应用于元素的背景、边框、文本等。
- 线性渐变（linear gradient）：从一个位置开始，向另一个位置进行过渡。
示例：
```css
.example{
background: linear-gradient(to bottom, red, blue);
/* 从上到下的渐变，红色到蓝色 */
height: 100px;
}
```
```html
```
效果：
- 径向渐变（radial gradient）：从一个点开始，向四周进行过渡。
示例：
```css
.example{
background: radial-gradient(circle, red, blue);
/* 圆形渐变，红色到蓝色 */
height: 100px;
}
```
```html
```
效果：
##### 变形
在 CSS 中，变形是指改变元素的形状、位置或大小的效果。
- 平移（Translate）：移动元素在平面上的位置。
- 缩放（Scale）：改变元素的大小。
- 旋转（Rotate）：围绕元素中心点旋转。
- 倾斜（Skew）：沿着水平或垂直轴倾斜元素。
- 组合变换：将多个变换组合在一起。
示例：
```css
.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);
}
```
```html
```
效果：
