css3边框（圆角、阴影、图片）的实现
2024年04月15日 css3 css3边框 边框 css3圆角 css3边框阴影 css3边框图片 懒猪技术
现在大部分的浏览器都支持新的css3功能了，所以，以前用图片来实现圆角和阴影的实现的，都可以换成css3简单的代码了。
浏览器前缀一览表：
| -moz- |
Firefox |
| -webkit- |
Chrome、Safari |
| -ms- |
Internet Explorer // IE9+ |
| -o- |
Opera |
注意：Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。Firefox、Chrome 以及 Safari 支持所有新的边框属性。对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。保险的办法是都加上前缀。以下的例子都以-webkit-为例，其余的前缀请自己加上：
一、CSS3边框圆角的实现
语法：
border-radius ： none | <length>{1,4} [ / <length>{1,4} ]
说明：
设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
border-radius同样是可以设置4个值，按照顺时针的方向，上左(top-left)→上右(top-right)→下右(bottom-right)→下左(bottom-left)的顺序作用于四个角。
水平与垂直半径相同时：
1个参数：border-radius:10px; /* 表示4个角的值是一样的。 */
1个参数
2个参数：border-radius:10px 20px; /* 上左、下右的半径值是10px ;上右、下左的半径值是20px */
2个参数
3个参数：border-radius:10px 20px 30px; /* 上左10px;上右、下左20px; 下右30px*/
3个参数
4个参数：border-radius:10px 20px 30px 40px; /* 对应的是上左(top-left)→上右(top-right)→下右(bottom-right)→下左(bottom-left) 四个角的半径值 */
4个参数
代码示例：
<style>
p.button{
border-radius:10px;
-webkit-radius:10px;-moz-radius:10px;-o-radius:10px;-ms-radius:10px;
width:100px;line-height:40px;height:40px;color:#fff;background:#333;
}
</style>
<p class="button">1个参数</p>
水平与垂直半径不同时：
border-radius用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径，应用规则与第一组值相同。
1个参数：border-radius:10px/5px;
1个参数
2个参数：border-radius:10px 20px/5px 10px;
2个参数
3个参数：border-radius:10px 20px 30px/5px 10px 15px;
3个参数
4个参数：border-radius:10px 20px 30px 40px/5px 10px 15px 20px;
4个参数
二、CSS3边框阴影实现
语法：
box-shadow：none | <shadow> [ , <shadow> ]*
box-shadow：none /* 设置none是表示没有阴影 */
举例说明：
box-shadow: 3px 3px 2px 1px #888888;
分别表示：水平偏移 | 垂直偏移 | 阴影模糊 | 阴影外延 | 设置对象的阴影颜色
注意：水平和垂直偏移可以用正负数、模糊和外延不允许负值
css3 边框阴影
代码示例：
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>css3边框阴影制作</title>
<style>
p.button{
width:100px;line-height:40px;height:40px;color:#fff;background:#FF9900;padding-left:20px;
box-shadow: 3px 3px 2px 1px #FF9900;
-webkit-box-shadow: 3px 3px 2px 1px #FF9900;
}
</style>
</head>
<body>
<p class="button">css3阴影</p>
</body>
</html>
如果是要设置内阴影的话就加上inset
例如：
box-shadow: 2px 2px 5px 1px #666 inset;
css3内阴影
代码示例：
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>css3内阴影</title>
<style>
p.button{
width:200px;padding:10px;background:#eee;color:#000;
-webkit-box-shadow:2px 2px 5px 1px #666 inset;
box-shadow:2px 2px 5px 1px #666 inset;
}
</style>
</head>
<body>
<p class="button">css3内阴影</p>
</body></html>
三、CSS3 边框图片
语法：<border-image-source> || <border-image-slice> [ / <border-image-width>? [ / <border-image-outset> ]? ]? || <border-image-repeat>
可以这样理解： 图片地址（默认值none） | 图片边框向内偏移（默认值100%） | 边框宽度（默认值1）| 边框图像区域超出边框的量（默认值0）| 填充方式平铺(repeated)、铺满(rounded)或拉伸(stretched) 默认值：stretched
stretch：指定用拉伸方式来填充边框背景图。
repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
说明：
设置或检索对象的边框样式使用图像来填充。IE浏览器都还不支持border-image
使用图像替代border-style去定义边框样式。当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。
使用图片：
border-image 使用上面的图片来创建边框
图片被拉伸以填充该区域
代码示例：
div
{
border-image:url(border.png) 30 30 stretch;
-moz-border-image:url(border.png) 30 30 stretch; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
}
本文链接：http://so.lmcjl.com/news/2203/