1.边框图片(了解)border-image-source:url(1.png);指定边框图片地址指定后边框颜色就没了。border-image-slice: 27 10;图片切割方式可写1~4个值不带单位分别代表左上右下border-image-width:100px;边框图片宽度可写1~4个值分别代表左上右下border-image-outset: 10px;边框图片外延值不可为负值border-image-repeat: stretch;边框图片的平铺方式stretch\round\repeat\spacestretch 指定用拉伸方式来填充边框背景图。repeat 指定用平铺方式来填充边框背景图。当图片碰到边界时如果超过则被截断。round 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。space 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。复合属性border-image: 图片地址 切割方式/宽度/外延值 拉伸方式2.边框圆角单角设置border-bottom-left-radius:100px 50px;设置左下角;指定一个值x和y半径;指定两个值分别表示x和y半径border-bottom-right-radius:右下角border-top-left-radius:左上角border-top-right-radius:右上角复合属性border-radius: 100px; 四个角半径都是100pxborder-radius:100px 50px; 左上和右下半径100px,右上和左下半径是50px;border-radius: 100px 40px 20px; 左上半径100px, 右上和左下半径是40px右下半径是20pxborder-radius:10px 20px 30px 40px; 左上 右上 右下 左下border-radius: 100px / 50px; 前面的是x半径后面是Y半径border-radius: 100px 50px / 20px 30px 40px;左上角x:100px y:20px右上角x:50px y:30px右下角 x: 100px y:40px左下角 x:50px y:30px解析.border-radius: 100px(上下) 50px (左右)/ 20px(上) 30px(左右) 40px(下);按照左上就是上右上就是右右下就是下左下就是左。3.背景3.1回顾背景属性①.background-attachment: fixed;用这个可以实现图片在下面放着元素在图片上移动可以看到图片的一部分。②.背景图的位置background-position指定具体的长度单位:background-position: 100px 200px;指定关键字:水平left right center 垂直top bottom centerbackground-position: center center;整个背景图居中指定百分比:background-position: 50% 50%; 相当于center centerbackground-position: 100% 100%; 相当于rigth bottombackground-postion 设置百分比计算方法:如设置 10% 20%x: (元素宽-背景图宽)*10%y: (元素高-背景图高)*20%3.2 background-originbackground-origin 背景图片原点取值padding-box(默认值) 从padding区域含padding开始显示背景图像。border-box 从border区域含border开始显示背景图像。content-box 从content区域开始显示背景图像。3.3 background-clipbackgroun-clip 指定对象的背景图像向外裁剪的区域。取值padding-box 从padding区域不含padding开始向外裁剪背景。border-box (默认值)从border区域不含border开始向外裁剪背景。content-box 从content区域开始向外裁剪背景。text 从前景内容的形状比如文字作为裁剪区域向外裁剪如此即可实现使用背景作为填充色之类的遮罩效果。只有webkit支持要加私有前缀。3.4 background-sizebackground-size:300px 200px; 设置背景图在元素上的大小不允许负值。也可以用百分比指定背景图像大小。不允许负值。auto 背景图像的真实大小。(默认值)cover 将背景图像等比缩放到完全覆盖容器背景图像有可能超出容器。contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等背景图像始终被包含在容器内。3.5 background复合属性复合属性的写法backgroundcolor image repeat attachment position/size origin clip;4.外轮廓outline不影响盒子大小不占位置在边框外边。①.outline-width:2px; 外廓线宽度,不允许负值②.outline-stylesolid; 外廓线风格dotted 点状轮廓。dashed 虚线轮廓。solid 实线轮廓。double 双线轮廓。③.outline-color:red;外廓线颜色复合属性outline: 2px dashed green;宽度 风格 颜色④.outline-offset:2px; 外轮廓线的偏移量, 取值长度单位只能写正值。需要单独写不可写在复合属性中。
1.边框图片(了解)border-image-source:url(1.png);指定边框图片地址指定后边框颜色就没了。border-image-slice: 27 10;图片切割方式可写1~4个值不带单位分别代表左上右下border-image-width:100px;边框图片宽度可写1~4个值分别代表左上右下border-image-outset: 10px;边框图片外延值不可为负值border-image-repeat: stretch;边框图片的平铺方式stretch\round\repeat\spacestretch 指定用拉伸方式来填充边框背景图。repeat 指定用平铺方式来填充边框背景图。当图片碰到边界时如果超过则被截断。round 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。space 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。复合属性border-image: 图片地址 切割方式/宽度/外延值 拉伸方式2.边框圆角单角设置border-bottom-left-radius:100px 50px;设置左下角;指定一个值x和y半径;指定两个值分别表示x和y半径border-bottom-right-radius:右下角border-top-left-radius:左上角border-top-right-radius:右上角复合属性border-radius: 100px; 四个角半径都是100pxborder-radius:100px 50px; 左上和右下半径100px,右上和左下半径是50px;border-radius: 100px 40px 20px; 左上半径100px, 右上和左下半径是40px右下半径是20pxborder-radius:10px 20px 30px 40px; 左上 右上 右下 左下border-radius: 100px / 50px; 前面的是x半径后面是Y半径border-radius: 100px 50px / 20px 30px 40px;左上角x:100px y:20px右上角x:50px y:30px右下角 x: 100px y:40px左下角 x:50px y:30px解析.border-radius: 100px(上下) 50px (左右)/ 20px(上) 30px(左右) 40px(下);按照左上就是上右上就是右右下就是下左下就是左。3.背景3.1回顾背景属性①.background-attachment: fixed;用这个可以实现图片在下面放着元素在图片上移动可以看到图片的一部分。②.背景图的位置background-position指定具体的长度单位:background-position: 100px 200px;指定关键字:水平left right center 垂直top bottom centerbackground-position: center center;整个背景图居中指定百分比:background-position: 50% 50%; 相当于center centerbackground-position: 100% 100%; 相当于rigth bottombackground-postion 设置百分比计算方法:如设置 10% 20%x: (元素宽-背景图宽)*10%y: (元素高-背景图高)*20%3.2 background-originbackground-origin 背景图片原点取值padding-box(默认值) 从padding区域含padding开始显示背景图像。border-box 从border区域含border开始显示背景图像。content-box 从content区域开始显示背景图像。3.3 background-clipbackgroun-clip 指定对象的背景图像向外裁剪的区域。取值padding-box 从padding区域不含padding开始向外裁剪背景。border-box (默认值)从border区域不含border开始向外裁剪背景。content-box 从content区域开始向外裁剪背景。text 从前景内容的形状比如文字作为裁剪区域向外裁剪如此即可实现使用背景作为填充色之类的遮罩效果。只有webkit支持要加私有前缀。3.4 background-sizebackground-size:300px 200px; 设置背景图在元素上的大小不允许负值。也可以用百分比指定背景图像大小。不允许负值。auto 背景图像的真实大小。(默认值)cover 将背景图像等比缩放到完全覆盖容器背景图像有可能超出容器。contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等背景图像始终被包含在容器内。3.5 background复合属性复合属性的写法backgroundcolor image repeat attachment position/size origin clip;4.外轮廓outline不影响盒子大小不占位置在边框外边。①.outline-width:2px; 外廓线宽度,不允许负值②.outline-stylesolid; 外廓线风格dotted 点状轮廓。dashed 虚线轮廓。solid 实线轮廓。double 双线轮廓。③.outline-color:red;外廓线颜色复合属性outline: 2px dashed green;宽度 风格 颜色④.outline-offset:2px; 外轮廓线的偏移量, 取值长度单位只能写正值。需要单独写不可写在复合属性中。
