🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# CSS3边框 [TOC] ## 圆角边框 `border-radius` :用于指定圆角边框的圆角半径。 * 如指定1个参数,则4个圆角都使用该长度作为半径。 * 如指定2个参数,则第一个参数作为左上角和右下角的半径,第二个参数作为右上角和左下角的半径。 * 如指定3个参数,第一个参数作为左上角的半径,第二个参数作为右上角和左下角的半径,第三个参数作为右下角的半径。 ```html <style> div { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; } </style> <body> <div>border-radius 属性允许您为元素添加圆角边框! </div> </body> ``` ## 边框阴影 `box-shadow`属性用于增加盒模型元素的边框阴影。一共有5个参数。 * 第一个参数:控制阴影在水平方向的偏移。 * 第二个参数:控制阴影在垂直方向的偏移。 * 第三个参数:控制阴影的模糊程度。 * 第四个参数:控制阴影的缩放程度。 * 第五个参数:改属性值控制阴影的颜色。 ```html <style> div { width:300px; height:100px; background-color:yellow; box-shadow: 20px 10px 100px 100px #888888; } </style> </head> <body> <div></div> </body> ``` **内部阴影** {box-shadow:inset x-offset y-offset blur-radius spread-radius color} 对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}