css3阴影边框怎么设置(css3中边框属性如何使用图片)

2、案例CSS代码
.box {box-shadow:5px 2px 6px #000 inset; width:300px; height:80px; margin:0 auto}
.box2 img {box-shadow:5px 2px 6px #000}CSS3中的box-shadow用法就这么多了，更多精激余彩请关注Gxl网其它相关文章！念铅尺
相关阅读：
HTML里DIV相互重叠怎么办
html里的br，p和DIV有什么区别
html的绝对路径和相对路径怎么使用

css3的边框属性如何使用

这次给大家带来css3的边框属性如何使用，使用css3边框属性的注意事项有哪些，下面就是实战案例，一起来看一下。
CSS3中的边框(Border). 这对我们来说并不陌生.多少次写下 border:1px solid red了..那么CSS3中会给我们带来什么惊喜呢？
在CSS3中.边框多了4种新特性
1.Border-color(设置边框颜色)
2.Border-image(通过图片设置为边框)
3.Border-radius(边框的半径)
4.box-shadow(阴影效果)
而我使用的浏览器版本为:IE8, FireFox10.0.9, Chrome 22.0.1229.94， Safari 5.1.7， Opera 12.50。。基本都是最新版本.
我们之前要给一个p加上边框时，我们会这样写
扮桐滚

.border_test
{
border:5px solid red;
}

常用的边框样式

border-color

既然我们已经可以设置边框颜色了，为什么还要border-color呢？因为CSS3的border有所不同.
使用border-color如果你设置了边框宽度是X。那么你就可以在这个这个边框上使用X种颜色,每种颜色显示1px的宽度.(ps:如果你边框宽度是10px,而你只设置了5种颜色，那么最后一种颜色将会填充剩下的宽度)
具体写法看下面代码

.border_test
{
border:5px solid red;
border-color:red blue green black;
}

CSS3 Border-color样式

但是结果和我们想的并不一样.

我们只看到了4个边框分别对应4种颜色.分别是 上 右 下 左。
当然，如果我们只输入3种颜色,中间的颜色就对应 左和右,具体的自己试一下吧.
那么之前我们说的每像素一种颜色的效果呢？别着急."那么你就可轮首以在这一边框上使用X种颜色".因为border-color是针对整个4条边框的，所以不是针对某条边框的.
如果我们需要做到上面的效果，可以针对某一条边框设置。他们分别是:
border-top-color
border-right-color
border-bottom-color
border-left-color
所以我们需要改一下代码

.border_test
{
border:5px solid red;
-moz-border-top-colors:Blue Yellow Red Black Green;
-moz-border-bottom-colors:Blue Yellow Red Black Green;
-moz-border-right-colors:Blue Yellow Red Black Green;
-moz-border-left-colors:Blue Yellow Red Black Green;
}

CSS3 Border-color样式

运行后

效果出来了有木有?虽然看不太清楚，不过确实每个像素一个颜色了，这样如果我们要做渐变颜色的话就方便了很多，只需要调整颜色就好了

.border_test
{
border:5px solid red;
-moz-border-top-colors:Blue Yellow Red Black Green;
-ms-border-top-colors:Blue Yellow Red Black Green;
-wekit-border-top-colors:Blue Yellow Red Black Green;
-o-border-top-colors:Blue Yellow Red Black Green;
border-top-colors:Blue Yellow Red Black Green;
}但是却发现，只有火狐上出现了效果，也就是说,border-边框-colors这个属性只有在火狐上可用，其他的不兼容.可惜了..
Border-image
border-image主要是用图片来填充边框.
border-image的分解属性分别为
border-image-source 指定border的背景图的url
border-image-slice 设置图片如何切割的属性，非定位！
border-image-width 定义border-image的显示区域的
border-image-repea
下面我们来逐个解析.
border-image-source
这个是指定border的背景图的url, 例
border-image-source ：url(../images/border.gif);这里可以设置为none,也就是无背景图
border-image-slice
设置图片如何切割的属性，（重点理解）他的值是四个数值, 没单位(实际上是已经固定是px了, 注意, 这个值不能是负值或大于图片的尺寸), 例如: border-image-slice:1 2 3 4; 你想得没错, 同样对应的是”上右下左”,将这几个数值, 把背景图片, 切割开来,具体一会再说
border-image-width
定义border-image的width, 这个是定义border-image的显示区域的(这个只是在w3c上描述的, 但在实际测试过, 设置这个属性没有作用, 但是border-width能生效)
border-image-repeat;
repeat有三个值选择
[ stretch repeat round ]：拉伸 重复 平铺 (其中stretch是默认值。)
好了，我们回头来看slice,也就是切割.= =说实话，不知道该怎么讲,还是上图吧.

左上图是一个这样的样式.border-image-slice:10 15 20 25; 他会将图片分割为右上边这样的9宫格图片.
left,top,right,bottom分别是你设置的距离，这一部分会被抽取出来作为边框.
top-left, top-right, bottom-left, bottom-right同样会被抽取出来，与left,top,right,bottom不同的是，他们不会受repeat,stretch,round的影响.
而left,top,right,bottom,则有可能因为拉伸什么的而改变宽度和高度.不知道这样说会不会容易理解点?
下面看代码

.border_test
{
-webkit-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-moz-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-o-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-ms-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
display: block;

border-width: 0 12px;
padding: 10px;
text-align: center;
font-size: 16px;
text-decoration: inherit;
color:white;
}

CSS3 Border-image样式

效果如下

用的材料图是

同样可惜的是，我这里只有FireFox和Safari出了效果，当然这也不能排序Chrome不能，因为听说有几个版本的可以。
Border-radius
终于到圆角了，感觉花了那么多字去写css3有点怪，因为本来很简单的- -哈
border-radius
参数:半径，不可以是负数，为0的话是直角

.border_test
{
border:5px solid red;
-moz-border-radius:15px;
-ms-border-radius:15px;
-wekit-border-radius:15px;
-o-border-radiuss:15px;
border-radius:15px;
}

CSS3 Border-radius样式

效果

圆角效果是比较常见的，而且在FireFox,Chrome,Safari,Opera都支持圆角效果，可惜IE还是只能回老家喝粥.不过据说IE9支持了。
相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
分别对应一个位置，需要注意的是，如果只有一个，会变成4分之1圆角，如果这4个里其中一个为0，那就回变成直角- -这个我也很纳闷.
box-shadow
最后一个，阴影

.border_test
{
border:5px solid red;
-moz-box-shadow:5px 2px 6px black;
-ms-box-shadow:5px 2px 6px black;
-wekit-box-shadow:5px 2px 6px black;
-o-box-shadow:5px 2px 6px black;
box-shadow:5px 2px 6px black;
}

CSS3 Border-shadow样式

三个像素值和颜色分别是
阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
BFC模式详解

href和src、link和@import有什么区别

css中属性值继承如何使用

如何使用boxshadow制作边框效果

在CSS3中可以通过设置box-shadow属性中的各个值来制作边框效果，比如想做一个1px粉色的边框就可以设置为box-shadow:0 0 0 1px pink
今天将分享的是如何使用CSS中的box-shadow属性构建一个边框，有一定的参考作用，希望对大家有所帮助。
【推荐课程：CSS3课程】
border属性制作边框
在平时我们写旁指代码的过程中，使用border属性去添加边框非常简单，例给div添加一个粉色的边框
div{
width:100px;
height: 100px;
border:3px solid pink;
}效果如下：
比如当我们鼠标移上边框时会发生边框效果增强的视觉效果
div:hover{
border:6px solid pink;
}效果如下：
但是这样情况下可以发现文本内容也发生了变化，这样的渲染效果不是很好，因此我们可以使用CSS3中新增了box-shadow属性来解决这个问题
box-shadow制作边框
box-shadow 属性
向框添加一个或多个阴影
它有6个属性值，分别为：
h-shadow：指的是水平阴影的位置，可以允许为负乱虚值，必须要填写的
v-shadow：指的是垂直阴影的位置，可以允许为负值，必须要写的
blur ：指的是模糊距离，可写可不写
spread：阴影的尺寸，可写可不写
color：阴影的颜色，可写可不写
inset：将外部阴影 (outset) 改为内部阴影，可写可不写
例：
div{
width:100px;
height: 100px;
border:3px solid pink;
box-shadow:2px 2px 6px 6px #ccc;
} 效果如下：
接下来就将和大家介绍用box-shadow的方法来制作边框

div{
box-shadow:0 0 0 3px pink;
} 效果图：

这个运陪配方框是不是与我们在前面用border写的方法的效果一样，而且它的渲染效果更好。
div:hover{
box-shadow:0 0 0 6px pink;
} 效果图如下
可以看出用box-shadow实现的边框在给元素添加hover属性时，文本内容并未移动，而在使用border时，文本内容有向前移动的效果。
总结：