CSS3 边框

边框

border

<div style="width: 100px; height: 100px; border: 1px dashed #f30e5c;"></div>

<!-- border 参数 -->
<!-- 1. 尺寸 -->
<!-- 2. 样式 【 solid 直线 | dashed 虚线 | 点点 dotted | 双线 double | none 取消边框 】 -->
<!-- 3. 颜色 -->

效果

圆角

border-radius

<div style="width: 100px; height: 100px; background: #1abb9c; border-radius: 5px;"></div>

<!-- border-radius: 5px;（四个角圆角度值 5px）-->
<!-- border-radius: 1px 2px 3px 4px;（左上角 / 右上角 / 右下角 / 左下角）-->

效果

轮廓

outline

<!-- outline 的语法和 border 完全一致，它是一条边框外的边框 -->

<div style="width: 100px; height: 100px; border: 3px solid #f95959; outline: 3px solid #facf5a;"></div>

效果

阴影

box-shadow

<div style="width: 100px; height: 100px; border: 1px solid #000; box-shadow: 5px 5px 3px gray;"></div>

<!-- box-shadow 参数 -->
<!-- 1. 水平阴影，正数靠右，负数靠左 -->
<!-- 2. 垂直阴影，正数靠上，负数靠下 -->
<!-- 3. 阴影模糊度 -->
<!-- 4. 颜色 -->

效果