课程笔记4 一、新增背景属性1.opacity不透明度说明给元素添加透明效果填0~1的数字0是完全透明1是完全透明。注意opacity是给元素设置透明度rgba是给颜色设置透明度。2.background—origin背景图原点(1).padding-box从padding区域开始显示背景图像。默认(2).border-box从border区域开始显示背景。(3).content-box从content区域开始显示背景。3.background-clip背景图向外裁剪的区域(1).padding-box从padding区域开始向外裁剪背景。(2).border-box从border区域开始向外裁剪背景。默认(3).content-box从content区域开始向外裁剪背景。(4).text:背景图只呈现文字。注意值为text时要加上-webkit-前缀。4.background-size背景图尺寸方法(1)用长度值调整大小不能用负值。(2)用百分比调整大小不能用负值。(3)auto原本尺寸。默认(4)contain把背景图等比放缩到与容器宽高相同把全部图片放到容器里可能会造成容器部分没有图片。(5)cover把背景图等比放缩到完全覆盖容器但图片可能显示不完全。相对推荐5.background复合属性backgroundcover url repeat position / size origion clip注意origin和clip的值一样时只写一个不同时按上面顺序写。position和size必须用 / 分开且顺序不能改变。6.多背景图backgurl(.........)no-repeat,url(.........)no-repeat right top,url(.........)no-repeat left bottom,url(.........)no-repeat right bottom;二、新增边框属性1.border-radius边框圆角同时设置四个角的圆角border-radius10px分开设置时应把上下左右写在中间并用连字连接。例border-top-left-radius左上角。注意要先写上下再写左右写一个值是正圆半径两个值是椭圆的x半径和y半径。综合写法border-radius左上x 右上x 右下x 左下x / 左上y 右上y 右下y 左下y2.外边框轮廓了解(1)outline-width:外轮廓宽度(2)outline-color外轮廓颜色(3)outline-style外轮廓风格none无轮廓dotted点状轮廓dashed虚线轮廓solid实线轮廓double双轮廓。(4)outline-offset外轮廓与边框距离正负均可(5)复合属性outline50px solid blue