CSS3边框 · 新前端98班随堂笔记和管理

## CSS3边框 ### 圆角边框 `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} `对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}`