一、属性
Properties 属性 | Description 简介 |
border | 复合属性。设置对象边框的特性 |
border-width | 设置或检索对象边框宽度 |
border-style | 设置或检索对象边框样式 |
border-color | 设置或检索对象边框颜色 |
border-top | 复合属性。设置对象顶边的特性 |
border-top-width | 设置或检索对象顶边宽度 |
border-top-style | 设置或检索对象顶边样式 |
border-top-color | 设置或检索对象顶边颜色 |
border-right | 复合属性。设置对象右边的特性 |
border-right-width | 设置或检索对象右边宽度 |
border-right-style | 设置或检索对象右边样式 |
border-right-color | 设置或检索对象右边颜色 |
border-bottom | 复合属性。设置对象底边的特性 |
border-bottom-width | 设置或检索对象底边宽度 |
border-bottom-style | 设置或检索对象底边样式 |
border-bottom-color | 设置或检索对象底边颜色 |
border-left | 复合属性。置对象左边的特性 |
border-left-width | 设置或检索对象左边宽度 |
border-left-style | 设置或检索对象左边样式 |
border-left-color | 设置或检索对象左边颜色 |
border-radius | 设置或检索对象使用圆角边框 |
border-top-left-radius | 设置或检索对象左上角圆角边框 |
border-top-right-radius | 设置或检索对象右上角圆角边框 |
border-bottom-right-radius | 设置或检索对象右下角圆角边框 |
border-bottom-left-radius | 设置或检索对象左下角圆角边框 |
box-shadow | 设置或检索对象阴影 |
border-image | 设置或检索对象的边框样式使用图像来填充 |
border-image-source | 设置或检索对象的边框是否用图像定义样式或图像来源路径 |
border-image-slice | 设置或检索对象的边框背景图的分割方式 |
border-image-width | 设置或检索对象的边框厚度 |
border-image-outset | 设置或检索对象的边框背景图的扩展 |
border-image-repeat | 设置或检索对象的边框图像的平铺方式 |
box-reflect | 设置或检索对象的倒影 |
二、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
.test li {
margin-top: 20px;
list-style: none;
}
.test .outset {
width: 400px;
padding: 10px;
background: #eee;
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, .6);
box-shadow: 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-blur {
width: 400px;
padding: 10px;
background: #eee;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-extension {
width: 400px;
padding: 10px;
background: #eee;
-webkit-box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
}
.test .inset {
width: 400px;
padding: 10px;
background: #eee;
-webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}
.test .multiple-shadow {
width: 400px;
padding: 10px;
background: #eee;
-webkit-box-shadow: 0 0 5px 3px rgba(255, 0, 0, .6), 0 0 5px 6px rgba(0, 182, 0, .6), 0 0 5px 10px rgba(255, 255, 0, .6);
box-shadow: 0 0 5px 3px rgba(255, 0, 0, .6), 0 0 5px 6px rgba(0, 182, 0, .6), 0 0 5px 10px rgba(255, 255, 0, .6);
}
</style>
</head>
<body>
<ul class="test">
<li class="outset">外阴影常规效果<br/>box-shadow:5px 5px rgba(0,0,0,.6);</li>
<li class="outset-blur">外阴影模糊效果<br/>box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
<li class="outset-extension">外阴影模糊外延效果<br/>box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li>
<li class="inset">内阴影效果<br/>box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li>
<li class="multiple-shadow">外阴影模糊效果<br/>box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
</ul>
</body>
</html>