css - 背景与边框

2020-04-19

综合背景属性使用技巧

具体实现

区分background-clip和background-origin
1. background-clip 背景延伸位置。可选值有 border-box | padding-box | content-box，默认值为 border-box
2. background-origin 背景起始点。可选值有 border-box | padding-box | content-box，默认值为 padding-box
当块元素边框和背景需要一个深浅效果时，结合半透明实现，优点是后续更改时只需更背景色。如：

提交

padding: 5px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 5px;
background: green;
color: white;
text-align: center;

想要使用自然随机背景时，通过使用质数来增加随机真实性。

随机颜色背景

background: hsl(20, 40%, 90%);
background-image:
    linear-gradient(90deg, red 11px, transparent 0),
    linear-gradient(90deg, green 23px, transparent 0),
    linear-gradient(90deg, yellow 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;

| 阅读量()