<commit_before># 第三章 形状

## 自适应的椭圆

通过单独指定**水平半径**和**垂直半径**, 可以实现一个椭圆, 或者当元素宽高相等时, 实现为一个圆:

```css
.ellipse-box {
    /* 元素尺寸为200px x 150px */
    border-radius: 100px / 75px;
}
```

但是我们想要的是一个自适应的椭圆, 而其实`border-radius`除了可以接受准确的长度值外, 还可以接受百分比值

```css
.ellipse-box {
    border-radius: 50% / 50%;
    /* 也就是 */
    border-radius: 50%;
}
```

### 半椭圆

`border-radius`这个属性可以向它一次性提供用空格分开的多个值. 而且还可以通过`/`来分别指定水平, 垂直半径.

半椭圆的实现:

- 这个形状是垂直对称的, 也就是左上角和右上角的半径值应该是相同的; 左下角跟右下角的半径也是相同的.
- 顶部边缘没有平直部分, 整个顶边都是曲线, 这意味着左上角和右上角的半径之和应该等于整个形状的宽度.
- 基于上两条, 可以得出左半径和右半径在水平方向上的值应该都是50%.
- 顶部的两个圆角占据了整个元素的高度, 且底部完全没有任何圆角. 也就是垂直方向上的合理值是`100% 100% 0 0`.
- 因为底部两个角的垂直圆角是零, 因此水平圆角是多少完全不重要.

```css
.half-ellipse-box {
    /* 沿横轴劈开的半圆 */
    border-radius: 50% / 100% 100% 0 0;

    /* 沿纵轴劈开的半圆 */
    border-radius: 100% 100% 0 0 / 50%;
}
```

### 四分之一椭圆

这个实现需要其中一个角的水平和垂直半径值都是100%, 其余三个叫都不能是圆角

```css
.quarter-ellipse-box {
    border-radius: 100% 0 0 0;
}
```

但是对于八分之一等等的形状, `border-radius`是无法实现的.<commit_msg>学习第三章<commit_after># 第三章 形状

## 自适应的椭圆

通过单独指定**水平半径**和**垂直半径**, 可以实现一个椭圆, 或者当元素宽高相等时, 实现为一个圆:

```css
.ellipse-box {
    /* 元素尺寸为200px x 150px */
    border-radius: 100px / 75px;
}
```

但是我们想要的是一个自适应的椭圆, 而其实`border-radius`除了可以接受准确的长度值外, 还可以接受百分比值

```css
.ellipse-box {
    border-radius: 50% / 50%;
    /* 也就是 */
    border-radius: 50%;
}
```

### 半椭圆

`border-radius`这个属性可以向它一次性提供用空格分开的多个值. 而且还可以通过`/`来分别指定水平, 垂直半径.

半椭圆的实现:

- 这个形状是垂直对称的, 也就是左上角和右上角的半径值应该是相同的; 左下角跟右下角的半径也是相同的.
- 顶部边缘没有平直部分, 整个顶边都是曲线, 这意味着左上角和右上角的半径之和应该等于整个形状的宽度.
- 基于上两条, 可以得出左半径和右半径在水平方向上的值应该都是50%.
- 顶部的两个圆角占据了整个元素的高度, 且底部完全没有任何圆角. 也就是垂直方向上的合理值是`100% 100% 0 0`.
- 因为底部两个角的垂直圆角是零, 因此水平圆角是多少完全不重要.

```css
.half-ellipse-box {
    /* 沿横轴劈开的半圆 */
    border-radius: 50% / 100% 100% 0 0;

    /* 沿纵轴劈开的半圆 */
    border-radius: 100% 100% 0 0 / 50%;
}
```

### 四分之一椭圆

这个实现需要其中一个角的水平和垂直半径值都是100%, 其余三个叫都不能是圆角

```css
.quarter-ellipse-box {
    border-radius: 100% 0 0 0;
}
```

但是对于八分之一等等的形状, `border-radius`是无法实现的.

## 平行四边形

视觉设计中, 平行四边形可以传达出一种动感. 通过`skew()`这个变形属性来对矩形进行斜向拉伸

```css
.skew-box {
    /* 只使用这个属性会导致内容也斜向拉伸 */
    transform: skewX(-45deg);
}
```

通过两个元素来实现, 内部元素反向拉伸

```html
<a href="#" class="button">
    <div>Click me</div>
</a>
```

```css
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }
```

### 纯CSS解决方案: 伪元素

将所有样式应用到伪元素上, 在对伪元素进行变形

```css
.button {
    position: relative;
}
.button::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skewX(45deg);
}
```

这种方法适用于其他任何变形样式, 当想要变形一个元素而不改变内容时, 就可以用到它.

还可以将这种方式应用到其他的场景中:

- IE8下实现多重背景
- "边框内圆角"效果实现
- 为某一层"背景"单独设置类似`opacity`等的属性
- 当无法使用"多层边框"的技巧时, 可以用这种方法来更加灵活地模拟多层边框. 如需要多层虚线边框, 或者需要在多重边框之间留有透明空隙等.
{'fraction_non_alphanumeric': 0.16575988393180993, 'fraction_numerical': 0.04642727602466449, 'mean_word_length': 3.7716262975778547, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 8, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7248099', 'n_tokens_mistral': 2103, 'n_tokens_neox': 2206, 'n_words': 214}