一、新增背景属性
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复合属性
background:cover url repeat position / size origion clip
注意:origin和clip的值一样时只写一个,不同时按上面顺序写。
position和size必须用 / 分开,且顺序不能改变。
6.多背景图
backg:url(.........)no-repeat,
url(.........)no-repeat right top,
url(.........)no-repeat left bottom,
url(.........)no-repeat right bottom;
二、新增边框属性
1.border-radius边框圆角
同时设置四个角的圆角:border-radius:10px;
分开设置时应把上下左右写在中间并用连字连接。
例:border-top-left-radius左上角。
注意:要先写上下,再写左右;
写一个值是正圆半径,两个值是椭圆的x半径和y半径。
综合写法:border-radius:左上x 右上x 右下x 左下x / 左上y 右上y 右下y 左下y
2.外边框轮廓(了解)
(1)outline-width:外轮廓宽度
(2)outline-color外轮廓颜色
(3)outline-style外轮廓风格
none:无轮廓;dotted:点状轮廓;dashed:虚线轮廓;solid:实线轮廓;double:双轮廓。
(4)outline-offset外轮廓与边框距离(正负均可)
(5)复合属性:outline:50px solid blue;