CSS3 (二) 边框

来源：互联网发布：中国的软件行业编辑：程序博客网时间：2024/04/30 08:52

CSS3 边框

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。

border-radius 属性创建圆角：

<!DOCTYPE html><html><head>     <title>title</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style> /** CSS3 圆角边框 text-align:center ;         文字居中 border:2px solid #ffff00;   边框大小 、 边框黄色 padding:10px 40px;          文字与上下间距、 左右间距 background:#dddddd;         div 背景 width:350px;                div 宽度 border-radius:25px;         圆角大小*/div{text-align:center;     border:2px solid #ffff00;padding:10px 40px; background:#dddddd;width:350px;border-radius:25px;}</style></head><body><div>border-radius 属性允许您向元素添加圆角。</div></body></html>

CSS3 边框阴影

box-shadow 用于向方框添加阴影：

<!DOCTYPE html><html><head>     <title>title</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style> /** CSS3 边框阴影 width:300px;                      div 宽度 height:100px;                     div 高度 background-color:#ff0000;         div 背景 红色 box-shadow: 10px 10px 5px #888888;       x轴偏移、 y轴偏移 、模糊值 、 阴影颜色    */div{width:300px;height:100px;background-color:#ff0000;box-shadow: 10px 10px 5px #888888;}</style></head><body><div></div></body></html>

CSS3 边框图片

border-image 属性，您可以使用图片来创建边框：

<!DOCTYPE html><html><head>     <title>title</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style> /** CSS3 边框图片 border-image-source                 用在边框的图片的路径 border-image-slice                  图片边框向内偏移。 border-image-width;                 图片边框的宽度  */.test{padding:10px;border-image-source:url(border.png);border-image-slice:27;border-image-width:auto;}}</style></head><body><div class="test">用图片来做边框<br />border-image-width:auto;</div></body></html>