你必须知道的CSS实用属性！挖掘底层逻辑，学以致用！

CSS实用属性挖掘(一)

CSS的世界丰富多彩，从简单的页面布局到复杂的动画，它总能给你带来惊喜。要想深入了解CSS，你需要夯实基础，挖掘底层逻辑。

接下来，我将分享一些我在工作中用到的简单CSS属性及其效果，让你学以致用，提升你的CSS技能。

1. cursor：光标样式

cursor属性可以改变鼠标悬停时的光标样式。它有许多预定义的值，如default、pointer、crosshair等。你也可以使用自定义图像作为光标。

body {
  cursor: pointer;
}

2. opacity：透明度

opacity属性可以设置元素的透明度。它的值在0到1之间，0表示完全透明，1表示完全不透明。

.transparent {
  opacity: 0.5;
}

3. transform：变换

transform属性可以对元素进行各种变换，如平移、旋转、缩放等。它有许多子属性，如translateX、translateY、rotate、scaleX、scaleY等。

.rotate {
  transform: rotate(45deg);
}

4. transition：过渡

transition属性可以为元素添加过渡效果。它有许多子属性，如transition-property、transition-duration、transition-timing-function等。

.transition {
  transition: opacity 1s ease-in-out;
}

5. animation：动画

animation属性可以为元素添加动画效果。它有许多子属性，如animation-name、animation-duration、animation-timing-function等。

.animation {
  animation: fadein 2s ease-in-out;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

6. box-shadow：阴影

box-shadow属性可以为元素添加阴影效果。它有许多子属性，如box-shadow-color、box-shadow-offset-x、box-shadow-offset-y等。

.shadow {
  box-shadow: 5px 5px 5px black;
}

7. border-radius：圆角

border-radius属性可以设置元素边框的圆角半径。它的值可以是一个像素值，也可以是一个百分比值。

.rounded-corner {
  border-radius: 5px;
}

8. text-shadow：文本阴影

text-shadow属性可以为元素的文本添加阴影效果。它有许多子属性，如text-shadow-color、text-shadow-offset-x、text-shadow-offset-y等。

.text-shadow {
  text-shadow: 2px 2px 5px black;
}

9. background-image：背景图片

background-image属性可以为元素添加背景图片。它可以是一个URL，也可以是一个CSS渐变。

.background-image {
  background-image: url("background.jpg");
}

10. background-position：背景位置

background-position属性可以设置背景图片的位置。它可以是一个像素值，也可以是一个百分比值。

.background-position {
  background-position: center center;
}

这些只是CSS中众多实用属性中的一小部分。如果你想了解更多，可以参考CSS规范或在线教程。