1.半透明边框
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
核心代码:
body {
background: url('http://csssecrets.io/images/stone-art.jpg');
}
div {
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
/* styling */
max-width: 20em;
padding: 2em;
margin: 2em auto 0;
font: 100%/1.5 sans-serif;
}
{
background: url('http://csssecrets.io/images/stone-art.jpg');
}
div {
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
/* styling */
max-width: 20em;
padding: 2em;
margin: 2em auto 0;
font: 100%/1.5 sans-serif;
}
2.多重边框
background: yellowgreen;
box-shadow: 0 0 10px #655,0 0 15px deeppink,0 2px 5px 15px rgba(0,0,0,.6)
3.灵活的背景定位
(1)不受padding影响的背景定位
background: url("code-pirate.svg") no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
background-origin: padding-box;
(2)在content里定位的背景,即会受padding的影响的定位
background: url() no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
background-origin: content-box;
(3)不想background-position写方位,单位也可以用calc()
background-position: calc(100% - 20px) calc(100% - 10px);
4.边框内圆角
div {
outline: .6em solid #655;
box-shadow: 0 0 0 .4em #655;
max-width: 10em;
border-radius: .8em;
padding: 1em;
margin: 1em;
background: tan;
}
5.条纹背景
(1)基本的垂直线性渐变
background: linear-gradient(#fb3,#58a);
(2)设置渐变区域的
background:linear-gradient(#fb3 20%,#58a 80%);
(3)背景分为两块色块
background:linear-gradient(#fb3 50%,#58a 80%);
(4)调整渐变尺寸的
background:linear-gradient(#fb3 50%,#58a 50%);
background-size: 100% 30px;
跟这样写是一样的效果:
background:linear-gradient(#fb3 50%,#58a 0);
background-size: 100% 30px;
(5)有三个颜色的条纹
background:linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
background-size: 100% 45px;