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. 颜色 -->

效果

CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex