1、圆角效果 border-radius
body{
border-radius:5px; /*所有圆角的半径均为10px*/
border-radius:1px 2px 3px 4px;/*按顺时针:左上、右上、右下、左下*/
}
2、阴影 box-shadow
body{
box-shadow:1px 2px 3px 4px red inset;
/*x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式*/
}
注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的
小补充:
(1)阴影模糊半径和阴影扩展半径是什么鬼?区别是什么?
阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
(2)X轴偏移量和Y轴偏移量值可以设置为负数
3、为边框应用图片 border-image
body{
background:url(csdn.jpg) 10px 20px no-repeat; /*宽度 长度*/
border-image:url(borderimg.png) 70 repeat;
}
repeat效果
round效果:
stretch效果: