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>效果：
