CSS边框

边框

边框有三个属性：若没有声明border-style，则边框其他属性都无效

• 边框颜色:border-color

• 边框粗细:border-width

• 边框样式:border-style

border-style（8种）

边框阴影

box-shadow: h-shadow v-shadow blur spread color inset;

• 用法跟文字阴影相似，多了 spread 调整范围, inset 调整内外

• inset 的效果跟外部阴影的位置相反

  • inset设置前

    • 

  • 设置后

    

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

spread和 blur

spread 和 blur 都是用于调整 CSS 中 box-shadow 属性的效果的参数。

1. blur：用来设置阴影的模糊程度。这个值越大，阴影就会越模糊，同时也会使阴影的大小扩展。如果没有模糊效果，阴影会呈现出硬边缘的外观。

2. spread：用来设置阴影的尺寸扩展量。正值会使阴影变大，负值会使阴影变小。这个值可以用来控制阴影的大小，使其比实际元素更大或者更小。

举个例子，假设我们有以下的 box-shadow 属性设置：

box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);

在这个例子中，5px 是水平偏移，5px 是垂直偏移，5px 是模糊程度，而最后的 5px 就是 spread 参数，表示阴影的尺寸扩展量。最后的 rgba(0, 0, 0, 0.3) 则表示阴影的颜色和透明度。

圆角边框

border-radius

圆形

border-上下-左右-radius

有时候会对元素不同的位置定义圆角，这样就需要分别设置。

border-radius属性派生了4个子属性：

border-top-right-radius:10px;/*定义右上角的圆角*/
​
border-top-left-radius:15px;/*定义左上角的圆角*/
​
border-bottom-right-radius:20px;/*定义右下角的圆角*/
​
border-bottom-left-radius:25px;/*定义左下角的圆角*/