1. 圆角
border-radius 圆角,让矩形盒模型拥有圆弧边缘;
取值通常使用百分比值 或 像素值 ;
值最多可为4个:
四个值: 左上 右上 右下 左下
三个值:左上 右上左下 右下
两个值:左上右下 右上左下
一个值:四个角同一值
圆角可以分解为更细的分解属性,比如左上角:border-top-left-radius
2. 阴影
box-shadow盒子阴影,让盒子四周产生阴影;
div{ box-shadow:10px 5px 10px 5px red outset; /* 第一个值:水平偏移(必需) 第二个值:垂直偏移(必需) 第三个值:模糊距离(可选,默认0) 从扩散边缘开始,向外逐渐模糊的距离 第四个值:扩散距离(可选,默认0) 规则从何处开始模糊,默认0也就是盒子边,大于0则会看到阴影明显漏出,允许负值 第五个值:隐藏颜色(可选,默认黑色) 第六个值:阴影扩散方向(可选,默认ouset向外扩展,可以改为inset向内扩展) */ }
3. 透明
opacity属性规定元素的透明度,取值 0(完全透明) ~ 1(完全不透明);
在IE8及以下使用filter:alpha(opacity=值); 值可以为 0(完全透明) ~ 100(完全不透明);