细说css边框border属性

CSS的边框

属性:border-style、border-width、border-color

写法:

分开写:E {border-style: solid;border-width: 1px;border-color: alicebule;}

合并写:E {border: 1px solid alicebule;}

注意:

  • border-style是必须属性,其他顺序可以打乱写
  • 如果设定 border:none,浏览器自动解析为border-style:none
  • 边框大小即border-width默认为medium

css3新增:
border-color、border-image、border-radius

CSS3:border-color

在css2中,我们可以运用border-color属性给元素的边框整体或者每一条边框上色,但是每条边框最多只能使用一种颜色。

而css3改进的border-color属性为我们提供了同一条边框设置多种颜色(比如说给边框添加一个渐变色,或者说一个彩色)的途径。不过到目前为止只有Firefox 3.0+的浏览支持这个属性。也是因为这一点,css3的border-color应用是相当的少。

上文提到过,css3border-color只有FF支持,故运用或测试时我们需要加上-moz-前缀。

用法:

.box{
border:5px solid transparent;
-moz-border-top-colors<color1> <color2> <color3> <color4> <color5>;
-moz-border-right-colors<color1> <color2> <color3> <color4> <color5>;
-moz-border-bottom-colors<color1> <color2> <color3> <color4> <color5>;
-moz-border-left-colors<color1> <color2> <color3> <color4> <color5>;
}

我们这时给每一条边框都设置了5种颜色,且都占据着5px的宽度。这个时候每种颜色的border-width为1px。事实上,如果我们边框设置 了x个像素的宽度,并且为每条边框设置了y种颜色,若x>y,则前y-1种颜色每种占据了1px,最后一种颜色占据x-y+1个像素。

实例:立体渐变效果

.box {
width: 200px;
height: 100px;
border: 10px solid transparent;
border-radius: 15px 0 15px 0;
-moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
}

效果:

CSS3:border-radius

border-radius相信很多前端ers都很熟悉了,就是元素圆角效果。这个属性兼容了ie9+以及其他主流现代浏览器。

基本写法:

  • 设置统一半径的圆角:border-radius:<length>
  • 设置多个半径的圆角: border-radius:<top-left> <top-right> <bottom-right> <bottom-left>
  • 设置水平垂直半径不统一的圆角:border-radius:<horizontal-length> / <vertical-length>
  • 分开设置:border-top-left-radius:<length> / <length>
    border-top-right-radius:<length> / <length>
    border-bottom-left-radius:<length> / <length>
    border-bottom-left-radius:<length> / <length>为兼容其他老版本的的浏览器,需要为其加上前缀,并且写法有点区别:FF:-moz-border-radius-topleft
    Chrome:-webkit-border-top-left-radius

    图解CSS3中提到webkit内核浏览器下图片没有圆角效果,经过测试(基于当前本人的chrome 44+的版本)webkit内核较新版本的浏览器已经修正了这个问题。如下图

Chrome下:

FF下:

border-radius还可以做出如圆、半圆、四分之一圆、椭圆的效果:

  • 圆:.box {
       height: 100px;     
       width: 100px;     
       border-radius:100px;/*或者50%*/     
       background: aliceblue;     margin: 20px;

    }

  • 半圆:.box {
       height: 100px;
       width: 50px;
       border-radius: 50px 0 0 50px;/*分表表示左上角 右上角 右下角 左下角*/
       background: aliceblue;

    }

  • 四分之一圆:.box {
       height: 100px;
       width: 50px;
       border-radius: 50px 0 0 0;/*分表表示左上角 右上角 右下角 左下角*/
       background: aliceblue;

    }

  • 椭圆:.box {
       height: 100px;
       width: 50px;
       border-radius: 25px / 50px;/*分表表示水平半径 垂直半径。或者50% / 50%;*/
       background: aliceblue;

    }

CSS3:border-image

border-image属性用以给任何元素(除border-collapse属性为collapse的table元素)设置图片效果边框,可以用来制作圆角按钮效果,渐变tabs效果等。border-image允许你使用一张小图片,并且将它分割成九个小部分, 然通过延伸这个小部分使其构成一个更大的元素。

注意 ie并不支持border-image

写法:

border-image: url top right bottom left x-repeat y-repeat
  • url:采用的图片的路径
  • top,right,bottom,left:图片的切割方法,注意是不需要加单位的(加了会失效)。默认是px,但可以使用百分比

如图:

图片切割方式:
这里通过两个实例来说明图片切割方式:


通过切割左边的小图片,使其延展+拼接成右边的大图。
若是我们进行如下的分割:

这样图片的切割长度分别为:0(上) 30(右) 0(下) 30(左)
现在的情况就等于用4、6两块小图进行拼接和延伸:

很容易发现,只要我们在水平和垂直方向进行延展就会达成效果图的样子了。

如果图片切割成这样:


就会发现实际效果中,会多出上下边框的宽度。其他没有变化。

图片铺排方式:


左图水平和垂直方向都是stretch,右图水平是stretch,垂直是round


图一水平和垂直均为round,图二水平和垂直均为stretch,图三均为repeat

参考文章:详解css3之border-image

CSS3:box-shadow

box-shadow用来定义元素的盒子阴影。
IE8及以前的浏览器不支持box-shadow

用法:

border-shadow: 阴影类型 水平位移 垂直位移 模糊半径 阴影扩展半径 颜色
  • 阴影类型默认为: 外阴影,可设定唯一值:inset
  • 水平位移:x-offset。可取正负值,正值阴影在元素右方。
  • 垂直位移:y-offset。可取正负值,正值阴影在元素下方。
  • 模糊半径:值只能为正,取值越大,阴影边缘越模糊。
  • 阴影扩展半径:可取正负值。若无模糊半径,设置了扩展半径和为元素设置边框的效果一致。

多层阴影:
box-shadow可以多层阴影同时使用,每层阴影之间使用“,”隔开。设置在最前的阴影将显示在最顶层,所以一定要注意阴影的大小取值。
若阴影的设置为:0 0 0 20px lime, 0 0 0 10px yellow, 0 0 0 8px green
则这时第一层阴影的扩展半径为20,显示在最顶层;第二层阴影显示在第一层阴影之下,此时因为第一层阴影的扩展半径>第二层阴影的扩展半径,所以第一层阴影会把第二层阴影覆盖掉。

From:segmentfault.com

Read:CSS3:不可思议的border属性

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注