前端开发小技巧 - 【CSS】 - 【盒子保持宽高比例、文字描边、文本竖行显示、滚动吸附、img图片裁剪、文字环绕】

前言

现在的CSS越来越强大，某一些功能，以前需要JS才能实现的效果，现在单纯靠CSS就能实现；

1、盒子保持宽高比例

实现步骤：
- 1、给盒子 设置宽度，不设高度；
- 2、增加属性：
```
aspect-ratio: 宽/高;
```
❗ 注意：
- 需要保持宽高比例的盒子只需设置宽度即可，不用设置高度，设置高度之后，aspect-ratio属性就会不生效；
效果展示：
- 盒子宽度或高度变化的时候，另一边也会跟着变化，保持宽高比例；

示例代码：

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .box {
        width: 500px;
        margin: 100px auto;
        background: red;
        aspect-ratio: 5/2;  // 盒子宽高比例为 5 / 2，宽度缩放的时候，高度也会跟着等比例缩放
    }
</style>

<body>
    <div class="box"></div>
</body>

2、文字描边效果

属性：

-webkit-text-stroke: 描边的尺寸 描边的颜色;

注意：
- 该属性是一个非标准属性，根据浏览器的版本的不同，存在兼容性问题；
  - 优点：
    - 代码简洁；
    - 支持文字颜色透明；
- 文字描边的效果，也可以通过文字阴影（设置8个方向的阴影上、右上、右、右下、下、左下、左、左上）的效果实现，这种方式不存在兼容性问题，但是代码会有点恶心；
  - 缺点：
    - 代码会很恶心；
    - 文字颜色不支持透明（文字阴影是有颜色的）；

示例代码：

<style>
    body {
        background-color: #333;
        color: red;
        color: transparent;
        font-size: 100px;
        text-align: center;
        line-height: 200px;
        -webkit-text-stroke: 2px #fff;  // 文字描边效果
    }
</style>

<body>
    TEXT-STROKE
</body>

效果展示：

使用文字阴影实现：

body {
    background-color: #333;
    color: red;
    font-size: 100px;
    text-align: center;
    line-height: 200px;
    text-shadow:
        0 2px #fff,
        0 -2px #fff,
        -2px 2px #fff,
        2px 2px #fff,
        -2px 0 #fff,
        2px 0 #fff;
}

实现效果：
- 效果虽然实现了，但是在一些转角的地方存在瑕疵（解决办法就是给更多的方向添加阴影😂😂😂）；

3、文字竖行显示

属性：

/* lr：从左向右； rl：从右向左 */
writing-mode: vertical-lr / vertical-rl;

示例代码：

<style>
    .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 500px;
        height: 500px;
        margin: 100px auto;
        background-color: rgb(253, 0, 106);
        color: #000;
        font-size: 60px;
        font-family: '隶书';
        /* writing-mode: vertical-lr; // 文本 从 左 向 右 */
        writing-mode: vertical-rl; // 文本 从 右 向 左
    }
</style>

<body>
    <div class="box">
        朝辞白帝彩云间，
        千里江陵一日还。
        两岸猿声啼不住，
        轻舟已过万重山。
    </div>
</body>

效果展示：

4、滚动吸附效果（轮播图）

我们在做轮播图的时候，有时候需求里面会标注说（当第一张图片滚动到什么位置的时候，我放开鼠标，它会自动滚动到第二张图片的位置），如果我们要使用JS去做的话，会很麻烦，这块新增的需求，其实我们也可以使用CSS去实现；

实现步骤：

1、给包裹轮播图Item的父元素设置:

scroll-snap-type: 滚动方向(x/y) 吸附方式(mandatory);
/* mandatory - 强制吸附，表示不能有中间状态（一半是第一张，另一半是第二张），必须吸附在某个元素上 */

2、找到Item，设置：

/* 吸附的对齐方式 - [元素的开始位置（左侧）和容器的对齐方式] */
/* start - 和 容器的左侧 对齐 */
/* center - 和 容器的中间 对齐 */
/* right - 和 容器的右侧 对齐 */
scroll-snap-align: start / center / right;

/* 停止方式：永远要停留在下一个元素； - 避免连续滚动的现象 */
scroll-snap-stop: always;

示例代码：

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: #eee;
    }

    ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 200px;
        background-color: #eee;
        overflow: auto;
        scroll-snap-type: x mandatory;
    }

    /* 隐藏滚动条 */
    ul::-webkit-scrollbar {
        display: none;
    }

    li {
        flex-shrink: 0;
        list-style: none;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 200px;
        font-size: 50px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .one {
        background-color: #fffb00;
    }

    .two {
        background-color: greenyellow;
    }

    .three {
        background-color: turquoise;
    }
</style>
</head>

<body>
    <ul class="box">
        <li class="one">1</li>
        <li class="two">2</li>
        <li class="three">3</li>
    </ul>
</body>

效果展示：

5、img标签图片的裁剪，保留原始比例

属性：
```
object-fit: 属性值;
```

5、文字环绕的方向

我们开发中遇到的文字环绕方向，都是用浮动（浮动就是为了文字环绕产生的）解决的；但是环绕的元素都是方方正正的，没有遇到其他的图形；如果遇到圆形，文字的环绕是怎么样的？？？
- 可以看到，文字的环绕方向依然是矩形，并没有按照现有的弧度进行环绕，解决这个问题的办法就是添加一行css属性即可实现；

属性

/* 作用：控制环绕这个元素的形状 */
shape-outside: circle(设置一个圆的半径 at 这个圆的圆心);
/* 圆的半径：相对于目标元素的尺寸 */
/* 圆的圆心：在目标元素的什么位置 */

示例代码:

<style>
    .box {
        width: 800px;
        height: 500px;
        margin: 100px auto;
        background-color: #eee;
    }

    img {
        width: 200px;
        margin-right: 2px;
        float: left;
        object-fit: cover;
        border-radius: 50%;
        shape-outside: circle(50% at 50% 50%); // 圆的半径就是这个图片的一半，圆的圆心在这个图片的中心
    }
</style>
</head>

<body>
    <div class="box">
        <img src="./Images/797979.png" alt="">
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
        前端开发小技巧 - 【CSS】 - 不常见但在开发中很有用的CSS属性 - 1【CSS + CSS3】
    </div>
</body>

效果展示：