在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)是一种用于创建平滑色彩过渡的效果。渐变可以应用于元素的背景、边框、文本等。
示例:
.example{
background: linear-gradient(to bottom, red, blue);
/* 从上到下的渐变,红色到蓝色 */
height: 100px;
}
<div class="example"></div>
效果:
示例:
.example{
background: radial-gradient(circle, red, blue);
/* 圆形渐变,红色到蓝色 */
height: 100px;
}
<div class="example"></div>
效果:
在 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);
}
<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>
效果: