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>

效果：