兼容性
-webkit- :chrome(谷歌) Safari(苹果)
-moz- : firefox(火狐)
-o- : opera(欧朋)
-ms- :IE
边框
圆角半径:
border-radius 一个用于设置所有四个边框- *-半径属性的速记
border-top-left-radius :左 上
border-top-right-radius :右 上
border-bottom-right-radius :右 下
border-bottom-left-radius :左 下
语法:
border-radius: 1-4 length(px)|%(相对于自身的宽高) / 1-4 length|%;
左右 / 上下
例:
border-radius:100px 100px 100px 100px /150px 150px 100px 100px,/前面为四个角的水平偏移,斜线右边为四个角的垂直偏移
注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。
1个值:左上右上右下左下
2个值:左上右下 右上左下
3个值:左上 左下右上 右下
4个值:左上 右上 右下 左下
阴影
text-shadow 向文本添加阴影。
text-shadow: h-shadow v-shadow blur color;
注意: text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
box-shadow 向盒子添加阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影
背景
background-size 规定背景图片的尺寸。
注意:background-attachment: fixed; size相对值相对于窗口
background-size: length|percentage|cover|contain;
length 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 覆盖 短边充满
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 容器 长边充满
background-origin 规定背景图片的定位区域。 指定background-position属性的相对位置
注意:如果背景图像background-attachment是"固定",这个属性没有任何效果。
background-origin: padding-box|border-box|content-box;
padding-box 背景图像填充框的相对位置 默认
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
background-clip 规定背景的绘制区域。对背景进行裁剪。
background-clip: border-box|padding-box|content-box;
border-box 默认值。背景绘制在边框方框内(剪切成边框方框)。
padding-box 背景绘制在衬距方框内(剪切成衬距方框)。
content-box 背景绘制在内容方框内(剪切成内容方框)。