bootstrap专栏 04.元素属性设置 02.颜色与边框

# 02.颜色与边框

[toc]{type: "ol", level: [3,4]}

### css结构
```css
.wh {
    width: 600px;
    height: 150px;
    background: #86cfda;
    margin: 10px 0;
}
```


### 设置颜色
- text-primary
> 设置文本颜色
- success info
- warning danger
- primary secondary
- dark light
- muted white
> muted: 用于提示文字
- bg-dark
> 添加背景色
- bg-transparent
> 使背景透明
```html
    <span class="text-success">love apple</span>
    <span class="text-info">love apple</span>
    <span class="text-warning">love apple</span>
    <span class="text-danger">love apple</span>
    <span class="text-primary bg-dark bg-transparent">love apple</span>
    <span class="text-secondary">love apple</span>
    <span class="text-dark">love apple</span>
    <span class="text-light">love apple</span>
    <span class="text-muted">love apple</span>
    <span class="text-white bg-dark">love apple</span>
```
![颜色与边框-设置颜色](02.颜色与边框-设置颜色.png)

### 设置圆角
#### 默认圆角
```html
<div class="wh border rounded"></div>
```
![颜色与边框-设置圆角-默认圆角](02.颜色与边框-设置圆角-默认圆角.png)

#### 微调圆角
```html
<div class="wh border rounded-lg"></div>
```
![颜色与边框-设置圆角-微调圆角](02.颜色与边框-设置圆角-微调圆角.png)

#### 设置圆角
> 50rem
```html
<div class="wh border rounded-pill"></div>
```
![颜色与边框-设置圆角-设置圆角](02.颜色与边框-设置圆角-设置圆角.png)

#### 设置椭圆
> 50%
```html
<div class="wh border rounded-circle"></div>
```
![颜色与边框-设置圆角-设置椭圆](02.颜色与边框-设置圆角-设置椭圆.png)

#### 自定义圆角
```html
<div class="wh" style="border-radius: 60px"></div>
```
![颜色与边框-设置圆角-自定义圆角](02.颜色与边框-设置圆角-自定义圆角.png)