CSS设置图片效果

1.常用属性及其含义

border	设置边框的所有属性
border-width	设置四条边框的宽度属性
border-sytle	设置四条边框的样式属性
border-color	设置四条边框的颜色属性
border-top	设置上边框的所有属性
border-top-width	设置上边框的宽度属性
border-top-sytle	设着上边框的样式属性
border-top-color	设置上边框的颜色属性

2.集中设置边框属性简化代码

为四个边框设置相同属性

border:边框宽度  边框样式  边框颜色; 

注：边框宽度  边框样式  边框颜色 顺序可打乱                                 

为单一边框分别设置属性

border-width:上边框宽度  右边框宽度  下边框宽度  左边框宽度;

border-style:上边框样式  右边框样式  下边框样式  左边框样式;

border-color:上边框颜色  右边框宽颜色 下边框颜色  左边框颜色;

注：当边框属性为一个时，改变全部边框；当边框属性为二个时，边框呈上下，左右对称显示；当边框属性为三个时，边框呈上、右、下、右样式显示

为四个边框集中设置属性

border-top(上)/bottom(右)/left(下)/right(左):边框宽度  边框样式  边框颜色;

3.设置图片大小与对齐方式

width：宽度   height：高度   常用单位：百分比%、像素px

百分比表示相对于父类标签的宽度和高度的比例

单独设置图片宽或高时，图片等比缩放

同时设置图片宽和高时，图片按照设置值显示

图片对其方式（与段落对其方式一致）

text-align：设置水平方向对齐方式

• left：水平左对齐
• right：水平右对齐
• center：水平居中对齐

vertical-align：设置垂直方向对齐方式

• top：顶端对齐
• bottom：底端对齐
• middle：中间对齐
• 垂直方向移动的数值，单位为像素（px）