CSS border

发表于: 2015-06-23分类于:CSS

设置边框使用下面的三个属性

  • border-width
  • border-color
  • border-style

也可以分开设置

  • border-top-style
  • border-left-style

使用简写方式的时候,给出四个值遵循上,右,下,左的次序,给出两个则是上下,左右,给出三个,则是上,左右,下。

border-style:

  • dotted:点
  • dashed:虚线
  • solid:实线

border-image

border-image 是以下几个部分的简写形式

border-imgae-source

设置边框的图片来源border-image-source:url(border.png);

border-image-slice

这部分是重点,border-image 是如何将图片应用到边框上的呢?

  d
 +-----+-----+-----+
 |     |     |     |
 |     |     |     | a   
 +-----+-----+-----+
 |     |     |     |
 |     |     |     |
 +-----+-----+-----+
 |     |     |     |
c|     |     |     |
 +-----+-----+-----+
                b

如上,将一个图片纵横分为9块,然后使用这9个分割而来的小图片给边框运用图片,图片的左上角就对应边框的左上角,依次类推。

border-image-slice 的语法如下:

border-image-slice:<number percentage>{1,4} [fill] 下面进行解释

第一部分参数是一个数字或者百分比,数字则表示像素数,百分比则是相对则是相对与待切分的图片来说的。{1,4} 则是说,可以给出1-4个数字或百分比,这个和 margin 与 padding 一个道理。而这四个数就决定了切分的位置。top,right,buttom,left 也就代表示意图中的a,b,c,d四个值的大小了,而这4个数也就唯一确定了切分方式。最后是一个可选参数是 fill ,如果加上这个参数表示保留中间部分。

border-image-width

border-image-width:<number|percentage|auto> {1,4}

用来设置图片的宽度,如果不设置则和 border-width 一样。

border-image-repeat

  • stretch:拉伸
  • repeat:重复
  • round:平铺
border-image-repeat:<repeat|round|stretch> {1,2}

需要注意的是这个属性只接受两个参数,所以他的上下是一样的,左右是一样的。

border-radius

border-radius:20px 10px 20px 20px / 5px 5px 10px 10px;

/前面设置四个角的水平方向圆角半径,后面四个设置垂直方向圆角半径。 简写方式可以为 border-radius:5px

当 border 和 border-radius 一起应用的时候,内部圆弧的半径就是 radius 的半径减去 border 的半径。

box-shadow

box-shadow:[inset] <x-offset> <y-offset> <blur-radius> <spread-radius> <color>

其中[inset]为可选参数,加上该参数表示阴影在内部。

box-shadow 并不会影响元素的布局。

边框在内阴影之上,内阴影在背景图片之上,背景图片在背景颜色之上,背景颜色在外阴影之上。