当前位置: 首页 > Web前端 > CSS

css3border-radiusbox-shadow

时间:2023-03-30 14:46:32 CSS

border-radius是给元素添加圆角边框。使用方法:border-radius:10px;/*所有角都圆角,半径为10px*/border-radius:5px4px3px2px;/*四个半径值分别是左上角,右上角,右下角和左下角角,clockwise*/soliduppersemicircle:方法:设置高度为宽度的一半,只设置左上角和右上角的半径与高度一致元素(大于那个也是可能的)。div{height:50px;/*是宽度的一半*/width:100px;背景:#9da;border-radius:50px50px00;/*radius至少设置为height的值*/}box-shadow是给方框添加阴影。支持添加一个或多个。很简单的一段代码就实现了投影效果,真的很酷。我们看语法:box-shadow:X轴偏移Y轴偏移[阴影模糊半径][阴影延伸半径][阴影颜色][投影方式];参数介绍:注意:inset可以写在参数的first或last,其他位置无效。x轴右侧为正,y轴下方为正。阴影模糊半径和阴影扩展半径的区别阴影模糊半径:该参数可选,其值只能为正值。如果它的值为0,则表示阴影没有模糊效果,值越大,阴影的边缘越模糊;阴影延伸半径:该参数可选,取值可正可负。如果该值为正,则整个阴影将被扩展,否则,如果该值为负,则缩小;为元素设置外阴影:示例代码:.box_shadow{box-shadow:4px2px6px#333333;}效果:为元素设置内阴影:示例代码:.box_shadow{box-shadow:4px2px6px#333333inset;}效果:添加多个阴影:上面语法的介绍就这么简单,如果添加多个阴影,用逗号分隔即可。如:.box_shadow{box-shadow:4px2px6px#f00,-4px-2px6px#000,0px0px12px5px#33CC00inset;}作用:CSS3border应用border-image到边框