1.半透明边框
问题原因：背景会扩展到边框border下
解决方案：把背景限制在padding-box中
background-clip: padding-box;
Paste_Image.png
2.多重边框
box-shadow方案
Paste_Image.png
div {
width: 100px;
height: 60px;
margin: 25px;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
}
注意：这里的边框是向外扩展的外边框，不会响应鼠标事件，加入属性insert可以解决这个问题
Paste_Image.png
outline 方案
background: yellow;
border: 10px solid #655;
outline: 5px solid deeppink;
注意：只适用于双层边框的效果；不一定能产生适应border-radius属性的圆角。
3.背景的灵活定位
background-position 方案
div {
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
}
注意：提供回退方案，使得在不支持background-position的浏览器中图像在右下角。
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-origin 方案
正常的background-position是以padding-box为准的，要排除padding-box 的影响可以使用background-origin 属性。
background-origin: content-box;
div {
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-origin: content-box;
/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px; //改变padding的值，背景的位置随之变化，固定在content-box内
color: white;
font: 100%/1 sans-serif;
}
calc() 方案
采用左上角思维，用calc()函数来确定位置，100%偏移量就靠右，100%-20px就是距离右侧边界20px;
div {
background: url(http://csssecrets.io/images/code-pirate.svg)
no-repeat bottom right #58a;
background-position: calc(100% - 20px) calc(100% - 10px);
/* Styling */
max-width: 10em;
min-height: 5em;
padding: 10px;
color: white;
font: 100%/1 sans-serif;
}
注意：这个方案不会随padding的变化而变化，背景固定在padding box 内。
4.边框内圆角
效果：边框内显示圆角，边框外部仍然是直角
解决方案：box-shadow和outline配合使用。
注意：box-shadow的宽度最小值，可以直接取border-radius的一半
div {
outline: .6em solid #655;
box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */
max-width: 10em;
border-radius: .8em;
padding: 1em;
margin: 1em;
background: tan;
font: 100%/1.5 sans-serif;
}
Paste_Image.png
5.条纹背景
问题：用css直接创建条纹背景
解决方案：利用渐变色的色标位置，当两色色标位置重合时，渐变效果消失，变成实色条纹
水平条纹
两色条纹
background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;
注意：第二个色标位置本来应该是50%，为了避免每次都修改两个参数，用到规范：当第二个色标位置设置为0，那么它的位置就会调整为前一个色标的位置值
Paste_Image.png
三色条纹
background: linear-gradient(#fb3 33.3%, #58a 0，#58a 66.6%, yellowgreen 0);
background-size: 100% 45px;
垂直条纹
background: linear-gradient(to right, #fb3 50%, #58a 0); //添加to right 属性
background-size: 30px 100%; //颠倒值，左右，上下
Paste_Image.png
两色斜向条纹
background: linear-gradient(45deg
#fb3 25%, #58a 0,
#58a 50%, #fb3 0,
#fb3 75%, #58a 0);
backgtound-size: 42.4px 42.4px
更加简洁的斜向条纹方案
background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px,
#58a 0, #58a 30px);//repeating-linear-gradient属性
height: 100%;
设置同色系条纹
方法：设置最深的颜色为背景色，叠加半透明白色条纹来产生浅色条纹
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
height: 100vh;
Paste_Image.png
6.复杂的背景图案
CSS3 图案库lea.verou.me/css3patterns
SVG 图案库philbit.com/svgpatterns
网格
思路：把水平和垂直的条纹进行叠加
方格条纹：
background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
可维护、合理的方案，可多种网格叠加
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px;
波点
background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
radial-gradient(tan 20%, 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;
优化
background: #eee;
background-image:
linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 0,transparent 75%,rgba(0,0,0,.5) 0),
linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 0,transparent 75%,rgba(0,0,0,.5) 0);
background-position:0 0,15px 15px;
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: 83px 100%, 61px 100%, 41px 100%;
Paste_Image.png
8.连续的图像边框
border-image：工作原理，九宫格伸缩法，不适合
思路：在背景图片上再加上一层纯白色的实色背景
图片边框背景
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white),
url(stone-art.jpg);//这里是边框背景图片地址
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;
简化代码
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
url(http://csssecrets.io/images/stone-art.jpg) border-box 0 / cover;
信封边框
用background叠加
div {
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 / 6em 6em;
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;
}
用border-image属性
div {
padding: 1em;
border: 1em solid transparent;
border-image:16
repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
#58a 0, #58a 3em, transparent 0, transparent 4em);
max-width: 20em;
font: 100%/1.6 Baskerville, Palatino, serif;
}
Paste_Image.png
蚂蚁行军效果
@keyframes ants{to{background-position:100%}}
div {
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;
max-width: 20em;
animation: ants 12s linear infinite;
}
Paste_Image.png
Paste_Image.png
用border-image做一个顶部边框被裁减的效果
思路：运用border-image加上一条由渐变生成的垂直条纹，而边框的粗细有border中的width来控制。
div {
max-width:20em;
border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg, currentColor 8em, transparent 0);
padding-top: 1em;
}
Paste_Image.png
本文整理自《CSS揭秘》
