CSS揭秘-背景与边框

CSS编码技巧

• 尽量减少代码重复
  当某些值相互依赖时，应该把他们的相互关系用代码表达出来，如行高是字号的1.5倍：

font-size: 20px;
line-height: 1.5;

• 相信你的眼睛，而不是数字
• 响应式网页设计（百分比长度、flex布局、媒体查询）
• 合理使用简写

背景与边框

1. 半透明边框

border: 10px solid hsla(0,0%,100%,.5); 
background: white;
background-clip: padding-box;

2. 多重边框

• box-shadow方案

background: yellowgreen; 
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink;

• outline方案

background: yellowgreen; 
border: 10px solid #655; 
outline: 5px solid deeppink;

实现效果：

3. 灵活的背景定位

• background-position的扩展语法方案

background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

• background-origin方案

padding: 10px;
background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */ 
background-origin: content-box;

• calc()方案

background: url("code-pirate.svg") no-repeat; 
background-position: calc(100% - 20px) calc(100% - 10px);

实现效果：

4. 边框内圆角

background: tan; 
border-radius: .8em; 
padding: 1em;
box-shadow: 0 0 0 .6em #655; 
outline: .6em solid #655;

实现效果：

5. 条纹背景

background: linear-gradient(#fb3 30%, #58a 0); 
background-size: 100% 30px;

实现效果：

• 垂直条纹

background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);
background-size: 30px 100%;

• 斜向条纹

background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

6. 复杂的背景图案

• 网格

background: #58a; 
background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px, transparent 0); 
background-size: 30px 30px;

• 波点

background: #655;
background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0); background-size: 30px 30px;
background-position: 0 0, 15px 15px;

• 棋盘

background: #eee; 
background-image:
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;

7. 伪随机背景

background: hsl(20, 40%, 90%); 
background-image:
    linear-gradient(90deg, #fb3 11px, transparent 0),
    linear-gradient(90deg, #ab4 23px, transparent 0),
    linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;

8. 连续的图像边框

• 老信封边框样式

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg,
              red 0, red 12.5%,
              transparent 0, transparent 25%,
              #58a 0, #58a 37.5%,
              transparent 0, transparent 50%) 0 / 5em 5em;

• 蚂蚁行军效果

@keyframes ants { to { background-position: 100% } }
.marching-ants { 
	padding: 1em;
	border: 1px solid transparent; 
	background: linear-gradient(white, white) padding-box,
	        	repeating-linear-gradient(-45deg,
	          	black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
	animation: ants 12s linear infinite; 
}