盒子模型

1 盒子尺寸

  • box-sizing 定义盒子模型的尺寸解析方式

    值：
content-box(默认)    
border-box

  • resize 否允许用户缩放，调节元素尺寸大小

    值：
none： 不允许用户调整元素大小。 (默认)
both： 用户可以调节元素的宽度和高度。 
horizontal： 用户可以调节元素的宽度     
vertical： 用户可以调节元素的高度。

2 display

display 盒子是否以及如何显示

值：
none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
inline： 指定对象为内联元素。 
block： 指定对象为块元素。 
list-item： 指定对象为列表项目。 
inline-block： 指定对象为内联块元素。（CSS2） 
table： 指定对象作为块元素级的表格。类同于html标签<table>（CSS2） 
inline-table： 指定对象作为内联元素级的表格。类同于html标签<table>（CSS2） 
table-caption： 指定对象作为表格标题。类同于html标签<caption>（CSS2） 
table-cell： 指定对象作为表格单元格。类同于html标签<td>（CSS2） 
table-row： 指定对象作为表格行。类同于html标签<tr>（CSS2） 
table-row-group： 指定对象作为表格行组。类同于html标签<tbody>（CSS2） 
table-column： 指定对象作为表格列。类同于html标签<col>（CSS2） 
table-column-group： 指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2） 
table-header-group： 指定对象作为表格标题组。类同于html标签<thead>（CSS2） 
table-footer-group： 指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3） 
box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3） 
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

3 盒子阴影

box-shadow 设置元素的阴影

box-shadow:<length>① <length>②;
box-shadow:<length>① <length>② <color>;
box-shadow:<length>① <length>② <length>③;
box-shadow:<length>① <length>② <length>③ <color>;
box-shadow:<length>① <length>② <length>③ <length>④ <color>;
box-shadow:<length>① <length>② <length>③ <length>④ <color> inset;
box-shadow:<length>① <length>② inset;

取值：

none： 无阴影

<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 <length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 <length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 <length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 <color>： 设置对象的阴影的颜色。 inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影

可以设定多组效果，每组参数值以逗号分隔

test .outset {
    box-shadow: 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-blur {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-extension {
    box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
}
.test .inset {
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}
.test .multiple-shadow {
    box-shadow:
        0 0 5px 3px rgba(255, 0, 0, .6),
        0 0 5px 6px rgba(0, 182, 0, .6),
        0 0 5px 10px rgba(255, 255, 0, .6);
}

4 盒子倒影

-webkit-box-reflect 倒影 （仅webkit 支持）

值: box-reflect：none | direction offset? mask-box-image?

取值：

direction: 

above： 指定倒影在对象的上边 
below： 指定倒影在对象的下边 
left： 指定倒影在对象的左边 
right： 指定倒影在对象的右边

offset:

<length>： 用长度值来定义倒影与对象之间的间隔。可以为负值 
<percentage>： 用百分比来定义倒影与对象之间的间隔。可以为负值

mask-box-image:

none： 无遮罩图像 
<url>： 使用绝对或相对地址指定遮罩图像。 
<linear-gradient>： 使用线性渐变创建遮罩图像。 
<radial-gradient>： 使用径向(放射性)渐变创建遮罩图像。 
<repeating-linear-gradient>： 使用重复的线性渐变创建背遮罩像。 
<repeating-radial-gradient>： 使用重复的径向(放射性)渐变创建遮罩图像。

5 盒子不透明度

  • opacity 检索或设置对象的不透明度。 值是0~1的范围。

  • 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果

    filter: alpha(opacity=透明值)

results matching ""

    No results matching ""