CSS3笔记

CSS的颜色表达
颜色宝典
CSS背景图片的设置

 overflow: scroll;
            /*设置滚动条*/
            background-image: url("resources/background.png"), url("resources/background.png");
            /*左边的背景图会去覆盖右边的背景图，背景图还会覆盖背景颜色*/
            background-repeat: no-repeat;
            /*no-repeat图像不重复，space水平重复图像*/
            background-position: 0px 0px;
            /*设置图像的位置*/
            background-size: 100%;
            /*设置图像的大小*/
            background-attachment: local
            /*设置为local会随着元素的滚动而滚动的，默认跟着页面滚动，fixed为固定不动*/;
            background-origin: padding-box;
            /*图像从哪个内边区域进行显示*/
            background-clip: content-box;
            /*图像从内边区域的哪个地方显示*/

边框的属性：
border-style：

其他的属性：

border-width: 30px;
border-color: 45px;
border-top-style:
border-right-style:
border-bottom-style:
border-left-style:
border-style:top,right,bottom,left
border-top-left-radius: 15px,15px 改变上和左的边框效果，两个15px分别指水平弧度的半径和竖直弧度的半径
border-radius:30px / 15px: 所有的边框水平弧度半径30px，竖直弧度半径15px

图像边框：
border-image-source: url(background.png); 图像来源
border-image-slice:30; 中间不用，将其他的图像边框进行切分
border-image-repeat:round; 图像拉伸方式
border-image-width: 图像宽度
border-image-outset: 10px; 边框离中间内容距离 

块内设置：

#clas a{
display: inline-block;
/*块内元素横向排列*/
width: 200px;
height: 50px;
color: white;
background: green;
text-align: center;
/*水平居中*/
float: right;
/*靠右放*/
z-index: num;
/*num越大，在多个图片叠在一起的时候越靠上显示*/
}

往下拉快到底时才显示的实现：

.pink{
width: 200px;
height: 200px;
background-color: pink;
}
.lightblue{
width:200px;
height:100px;
position:sticky;
/*结合了float和fixed，当到某个位置时才被定住*/
bottom: 50%;
z-index: -1;
background-color: lightblue;
}