背景属性

背景图片

css3中可以设置多张背景图片，多张图片用逗号隔开

div{width: 1200px;height: 800px;background-color: red;background-repeat: no-repeat;background-image: url(./images/navimages/canpan.png),url(./images/navimages/canpan.png);/* 第一组参数是指的第一张图片的位置第二组参数指的是第二张图片的位置 */background-position: left top, right bottom;}

background-origin

规定背景图片的定位位置

content-box : 背景图相对于内容框来定位

padding-box :背景图相对于内边距框来定位

border-box:背景图相对于边框来定位

/* 背景图片是在内容的左上角开始定位 */
background-origin: content-box;
/* 背景图片是在元素的左上角 */
background-origin: padding-box;
/* 背景图片是被边框压住 */
background-origin: content-box;

content-box会跟随内容位置

padding-box ：不会压到边框

border-box：会压到边框

background-clip

用来规定绘图的区域

content-box : 背景图相对于内容框来定位

padding-box :背景图相对于内边距框来定位

border-box:背景图相对于边框来定位

/* 背景图片是在内容的左上角开始定位 */
background-clip: content-box;
/* 背景图片是在元素的左上角 */
background-clip: padding-box;
/* 背景图片是被边框压住 */
background-clip: content-box;

css3中渐变属性

渐变指的是两个或多个属性之间平稳的过渡

线性渐变

为了创建一个线性渐变，需要定义至少两种颜色的结点，颜色节点就是要呈现平稳过渡的颜色，也就是两个颜色要设置一个起始点和一个结束点

background:linear-gradient(direction,color-stop1,color-stop2.....)

background: -webkit-linear-gradient(red, green);
background: -moz-linear-gradient(red, green);
background: linear-gradient(red, green) /* 标准语法要放在最后 */

epeating-linear-gradient重复线性渐变

就是重复渐变的部分

语法

background: -webkit-repeating-linear-gradient(side-or-corner|anger,color-stop) */

side-or-corner:描述线性渐变的起始位置，包含to和两个关键词，第一个指出水平位置 left 和 right

第二个指出垂直位置：top 和 bottom

anger:是用角度来指定渐变的方向

color-stop： 由一个组成，并且跟随一个可选的终点位置

background: -webkit-repeating-linear-gradient(top, red 100px, yellow 200px);/* background: repeating-linear-gradient(top,red 10%, yellow 20%); */

径向渐变

径向渐变由中心定义，必须至少定义两种颜色结点，颜色结点就是你想要的呈现平稳过度的颜色，也就是两个颜色需要设置一个起点和一个结束点

语法：

background:radial-gradient(direction,color-stop1,color-stop2.....)

/* background:radial-gradient(red,yellow); */
background:radial-gradient(red 20%,yellow 50%)

repeating-radial-gradient重复线性渐变

 background:repeating-radial-gradient(red 20%,yellow 50%)

css3用户界面

resize属性

规定用户是否可以调整大小

可能的值：

none:用户无法调整尺寸

both:元素的宽度和高度都可以调整

horizontal: 只能调整元素的宽度

vertical:只能调整元素的高度

.div {width: 120px;height: 80px;border: 2px dashed red;overflow: auto;/*resize: none;resize: both;resize: horizontal;*/resize: vertical;
}

多列布局

column-count: 规定元素划分的最佳列数

column-width:规定栏目的宽度

column-gap:规定列之间的间隔

column-rule: 这是一个简写属性，用于设置所有的column-roule-***属性

.div {column-count: 5;column-width: 200px;column-gap: 30px;/* column-rule: 1px solid red; */column-rule-width: 1px;column-rule-style: solid;column-rule-color: red;
}