CSS 实用效果

1.处理文本的大小写

text-transform属性：有四个值，如下：

none：默认值
uppercase:将文本转换成全大写
lowercase:将文本转换成全小写
capitalize:对每个单词的首字母大写

2.实现首字下沉

:first-letter选择器用来指定第一个子母的样式，仅适用于在块级元素中。如下：

p:first-letter{
    font-size:16px;
    color:#8A2BE2;
}

3.实现正方形

aspect-ratio属性：

.square {
  background: purple;
  width: 200px;
  aspect-ratio: 1/1;
}

4.图片文字环绕

shape-outside：允许设置形状，有助于定义文本流动的区域，有如下属性值：

圆形：shape-outside:circle（50%），第一个值代表半径

椭圆：shape-outside:ellipse(60px 80px)，两个值都是半径

多边形：shape-outside: polygon(0 0,100% 100%,0 100%);（三角形），最少三个值，

.shapes {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

5.:where()简化代码

当对多个元素应用同样的样式时，可以用where,如下：

.container :where(div, .title, #article) {
  color: pink;
}

6.悬停放大：

transform：应用于元素的2D和3D的转换，可以将元素旋转、缩放、移动、倾斜等，值为scale时，可以实现元素的2D缩放转换。

图片的悬停方法效果，使用transform，如下：

img:hover {
  transform: scale(1.5);
}

7.cursor自定义光标

cursor：属性，可自定义光标的样式，只需要设置对应的图片路径就可以，如下：

default：默认光标(通常是一个箭头)；

auto：默认，浏览器设置的光标；

crosshair：十字线；

pointer：指示连接的指针（一只手）；

move：指示某对象可被移动；

e-resize：指示矩形框的边缘可被向右（东）移动；

ne-resize：指示矩形框的边缘可被向上及向右（北/东）移动；

nw-resize：指示矩形框的边缘可被向上及向左（北/西）移动；

n-resize：指示矩形框的边缘可被向上（北）移动；

se-resize：指示矩形框的边缘可被向下及向右（南/东）移动；

sw-resize：指示矩形框的边缘可被向下及向左（南/西）移动；

s-resize：指示矩形框的边缘可被向下（南）移动；

w-resize：指示矩形框的边缘可被向左（西）移动；

text：光标指示文本；

wait：光标指示程序正忙(通常是一只表或沙漏)；

help：光标指示可用的帮助(通常是一个问号或一个 气球)。