tailwind中的背景和边框

背景滚动

bg-fixed  ： 相对视口固定，不会随着任何滚动而滚动
bg-local  ： 会随着任何滚动而滚动
bg-scroll ：不会随着元素滚动而滚动，但是会随着整个页面的滚动而滚动

背景裁切

bg-clip-border
bg-clip-padding
bg-clip-content
bg-clip-text

背景颜色

bg-transparent  ：背景透明

bg-[*]  :星号可以是任意CSS支持的颜色字符串，如
    bg-[rgb(200,200,200)]
    bg-[rgba(200,200,200,0.6)]
    bg-[#fce5df]
    bg-[yellow]
    bg-[HSL(360,100%,50%)]
    bg-[HSLA(360,100%,50%,0.6)]

bg-[*]/n : n为一个0-100的数字，表示透明度，100为完全不透明

背景填充方式

bg-origin-border    background-origin: border-box;
bg-origin-padding   background-origin: padding-box;
bg-origin-content   background-origin: content-box;

背景位置

自定义：bg-[center_top_1rem]

bg-bottom           bg-center
bg-left             bg-left-bottom
bg-left-top         bg-right
bg-right-bottom     bg-right-top
bg-top

背景重复

bg-repeat       bg-no-repeat
bg-repeat-x     bg-repeat-y

背景尺寸

bg-auto     默认值，图像以本尺寸显示
bg-cover    等比例缩放图像，使图像至少覆盖容器，但有可能超出容器
bg-contain  等比例缩放图像，使其完整的显示在容器中

bg-[*]
    长度值：有两个值(使用下划线连接)，第一个为宽，第二个为高
    百分数：一个百分数，背景图片会占用总容器的容量大小

线性渐变

指定渐变方向
bg-gradient-to-[ l / r / t / tl / tr / b / bl / br ]

指定渐变颜色(最多支持三色)
from-[color]/n ：起始色
    color为css支持的颜色代码
    n为透明度，可以省略
via-[color]/n  ：中间色
to-[color]/n   ：终止色

手动指定渐变位置
from/via/to-[*] ：星号为一个百分数，表示指定的颜色渐变位置

背景图

bg-[url()] ：指定背景图片

bg-none：不使用背景

边框样式

border-solid        border-dashed
border-dotted       border-double
border-hidden       border-none

边框颜色

border-[color]/n ：设置四边颜色

border-side-[color]/n ：设置指定边颜色
    side可选的值  l、r、t、b、x、y、s、e

边框宽度

border-[*] ：设置四边宽度
border-side-[*] ：设置指定边宽度

边框圆角

rounded-[*] ：设置四边圆角
rounded-side-[*] ：设置指定边圆角
    side ： l / r / t / tl / tr / b / bl / br

什么后缀都不加，仅只用rounded类名，表示圆角大小为0.25rem

none        0px
full        9999px，一般用来制作圆形

分割边框

分割边框就是水平或垂直排列的元素之间的边框，两端没有边框

边框宽度
divide-x-[*]
divide-y-[*]

边框颜色
divide-[color]/n

边框样式
divide-[style]

轮廓

轮廓是在元素获得焦点后显示的类似于边框

轮廓不计算在元素的尺寸中，比如input元素获得焦点后有一个轮廓

轮廓宽度
outline-[*]

轮廓颜色
outline-[color]/n

轮廓样式
outline-[style]

轮廓偏移，即轮廓距离外边框的距离
outline-offset-[*]

环

轮廓是元素获得焦点后才显示的，而环是任何时候都显示的，默认为浅蓝色

轮廓位于元素外边框外侧，环位于轮廓外侧，两者都不计算如元素尺寸

环宽度
ring-[*]

环颜色
ring-[color]/n

环偏移，即环距离轮廓的距离
ring-offset-[*]