CSS3知识汇总14
【半透明边框】
body{background-color:green}
img{
border:10px solid hsla(0, 0%, 100%, .5);
background: white;
background-clip: padding-box;
}
如果不希望背景侵入边框所在的范围，用padding-box将内边距的外沿把背景裁掉
【实线多重边框】
div{
width:100px;
height: 100px;
margin:80px auto;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6); /*投影*/
}
2.使用outline
div{
width:100px;
height: 100px;
margin:80px auto;
background: yellowgreen;
border:10px solid #655;
outline: 5px solid deeppink; /*适用双重边框*/
}
【虚线双重边框】
div{
width:100px;
height: 100px;
margin:80px auto;
background: yellowgreen;
border:10px solid #655;
outline: 5px dotted deeppink;
}
【背景定位】
div{
background:url("css3.png") no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
width: 600px;
height: 600px;
}
【边框内圆角】
两个div时：
.con{
background-color: #655;
padding: .8em;
}
.con > div{
background-color: tan;
border-radius: .8em;
padding:1em;
}
一个div时：
.con{
background-color: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
/*box-shadow: 0 0 0 .6em red;
outline: .6em solid #000; 注释中的改变能看出如何实现的*/
}
【条纹背景】
.con{
width: 300px;
height: 200px;
}
1.颜色从#fb3过渡到#58a
background:linear-gradient(#fb3, #58a);
2.色标拉近一点
background:linear-gradient(#fb3 20%, #58a 80%);
3、变为50%，变成两色背景
background:linear-gradient(#fb3 50%, #58a 50%);
4、等宽条纹
background-size: 100% 30px;
background-size后，条纹变成等宽的15px
5、不等宽的条纹
background:linear-gradient(#fb3 20%, #58a 0%);
第二个色值值为0，它的位置就总是被浏览器调整为前一个色值的位置值
6、三色条纹
background:
linear-gradient(to right,
blue 33.3%, white 0,
white 66.6%, red 0);
background-size: 100% 30px;
7、四色条纹
background:
linear-gradient(
#fb3 33.3%, #58a 0,
#58a 66.6%, yellowgreen 0,
yellowgreen 88.8%, red 0
);
8、垂直条纹
background:
linear-gradient(to right,
#fb3 50%, #58a 0
);
to bottom是默认值
9、波纹条纹
background:
linear-gradient(45deg,
#fb3 50%, #58a 0
);
10、斜向条纹
background:
linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0
);
background-size: 42px 42px;
使用 repeating-linear-gradient循环
background:
repeating-linear-gradient(45deg,
#fb3, #fb3 15px, #58a 0, #58a 30px
);
background-size: 42px 42px;
