css3-边框-阴影，圆角，渐变，透明

圆角

圆角

border-radius:25px;
25px为半径，最大不超过该模块长宽的一半

阴影

div
{
         // x     y    z   color
box-shadow: 10px 10px 5px #888888;
}

x代表水平位移，0+代表右 0-代表左
y代表垂直位移，0+代表向下 0-代表向上
z代表模糊半径，阴影效果
color模糊颜色

阴影
整理自：http://www.w3school.com.cn/css3/css3_border.asp

渐变

线性渐变

左--->右
background: linear-gradient(to right, red , blue);
上--->下
background: linear-gradient(red, #fff);
左上--->右下
background: linear-gradient(to bottom right, red , blue);

径向渐变

渐变

background: linear-gradient(45deg, red, blue);
x deg 代表角度可根据下图调整达到效果

deg

摘自菜鸟教程 http://www.runoob.com/css3/css3-gradients.html

透明

ie9+
opacity:x;(x范围为0-1如0.4)
img
{
opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 /
}
img:hover//鼠标悬停后样式
{
opacity:1.0;
filter:alpha(opacity=100); / IE8 及其更早版本 */
}

透明
background:rgba(192,192,192,0.2);
可设置背景颜色透明