css3新增了哪些边框效果

这篇文章主要介绍"css3新增了哪些边框效果"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"css3新增了哪些边框效果"文章能帮助大家解决问题。

css3新增的三种边框效果：1、边框图片"border-image"，可为边框添加背景图片；2、边框圆角"border-radius"，可给元素添加一个或多个圆角效果；3、边框阴影"box-shadow"，可将一个或多个阴影添加到元素框上。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3新增了三种边框效果

1、边框图片"border-image"

border-image属可以为边框添加背景图片。现在所有主流浏览器最新版本都支持border-image属性。

语法：

说明：

border-image属性需要定义3个方面的内容。

（1）图片路径。

（2）切割宽度：四条边的切割宽度，依次为上边、右边、下边、左边（顺时针）。

（3）平铺方式：有3种取值，分别为repeat、round和stretch。

在本节所有例子中，我们都是使用图所示的这张90px×90px的图片作为边框的背景图片。

代码示例：

浏览器预览效果如下图所示。

分析：

从预览效果我们可以知道，位于4个角的数字1、3、7、9还是乖乖地位于4个角。然后4条边框的2、4、6、8会不断地平铺。

对于border-image属性，我们总结如下:

（1）在制作边框背景图片时，应该制作4条边，中间部分需要挖空。

（2）边框背景图片每条边的宽度跟对应的边框宽度（即border-width）应该相同。

2、边框圆角"border-radius"

border-radius属性可以给边框添加圆角效果

border-radius 属性定义元素角的半径，通过 CSS border-radius 属性，可以实现任何元素的"圆角"样式。

语法：

border-radius: none　｜　length{1,4} [/ length{1,4}

其中每一个值可以为 数值或百分比的形式。

length/length　第一个lenght表示水平方向的半径，而第二个表示竖直方向的半径。

如果是一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等。

如果是两个值，那么 top-left和bottom-right相等，为第一个值，top-right和bottom-left值相等，为第二个值。

如果是三个值，那么第一个值是设置top-left，而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。

如果是四个值，那么第一个值是设置 top-left， 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left

除了上述的简写外，还可以和border一样，分别写四个角，如下：

border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角

分别是水平方向和竖直方向半径，第二值省略的情况下，水平方向和竖直方向的半径相等。
border-radius 只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式，对于老版的浏览器，border-radius 需要根据不同的浏览器内核添加不同的前缀，比说 Mozilla 内核需要加上"-moz"，而 Webkit 内核需要加上"-webkit"等，但是IE和Opera没有私有格式，因此为了最大程度的兼容浏览器，我们需要设置如下：

-webkit-border-radius: 10px 20px 30px; -moz-border-radius: 10px 20px 30px; border-radius: 10px 20px 30px;

请将标准形式写在浏览器私有形式之后。

示例：

3、边框阴影"box-shadow"

在css中，可使用box-shadow属性实现边框阴影效果，box-shadow属性可以设置一个或多个下拉阴影的框。

语法

box-shadow: h-shadow v-shadow blur spread color inset;

可能的值：

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

box-shadow属性的使用

1、水平垂直偏移为0也可以有阴影

如果offset-x或offset-y值为0，则阴影在元素背后，此时给blur-radius值或spread值可以产生阴影效果。

例子：

• 第一个div通过设置blur-radius产生阴影效果。

• 第二个div通过设置spread正值产生阴影效果。

• 第三个div通过设置spread负值产生阴影效果。

但是有一点要注意：扩展阴影必须和阴影模糊半径配合使用。

我个人觉得应该是没有配合使用这一说，但不可能只设置扩展阴影，因为扩展阴影和阴影模糊的取值都可以为正。如果只有扩展阴影的话，会被浏览器当做模糊阴影来解析，所以也可以简单理解为"扩展阴影必须和阴影模糊半径配合使用"，如果只用扩展阴影，可以写成：box-shadow:0 0 0 1px;。

2、设置水平垂直偏移得到阴影效果

outset情况：水平垂直偏移为0，但是不设置blur和spread，看不到阴影，因为此时box-shadow的周长和border-box一样，所以可以通过设置偏移让阴影显示出来。

inset情况：水平垂直偏移为0，不设置blur和spread，同样看不到阴影，因为此时box-shadow的周长和padding-box一样，同样可通过设置偏移让阴影显示出来。

例子:

3、投影方式

投影方式默认是outset，即外部投影，可设置inset让向内投影。

例子：第一个div默认outset，第二个设置inset，第三个同时设置两个阴影可以更好的看到outset和inset的关系，第四个div可以看出inset阴影在背景之上，内容之下。

    
    
    
    
inset阴影在背景之上，内容之下

4、如果元素同时指定border-radius属性，则阴影呈现相同的圆角。

关于"css3新增了哪些边框效果"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。