理解CSS边框

基础样式

边框

　　边框是一条以空格分隔的集合样式，包括边框粗细(边框宽度)、边框颜色和边框样式，且先后顺序无关

border: border-width border-color border-style
border: 1px solid red;

 

边框样式

　如果一个边框没有样式，边框将根本不会存在

border-style:none(默认)
border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9种)

 

边框宽度

　　边框的宽度不能为负，不能指定为百分比值

border-width: thin/medium(默认)/thick/<length>

 

边框颜色

　　默认的边框颜色是元素本身的前景色，但是，在表格中，若只设置border-style，而不设置border,则边框颜色为黑色，而不与文本颜色相同

border-color: transparent/<color>

 　　

　　<演示框>点击下列相应属性值可进行演示

 

边框单边

border-top/border-right/border-bottom/border-left

 

12种边框样式

border-width:
    border-top-width    border-right-width
    border-bottom-width    border-left-width

border-style:
    border-top-style    border-right-style
    border-bottom-style    border-left-style

border-color：
    border-top-color    border-right-color
    border-bottom-color    border-left-color

 

重点

四值顺序

border-width: 1px 2px 3px 4px;//上右下左
border-width: 1px 2px 3px;//上(左右)下
border-width: 1px 2px;//(上下)(左右)
border-width: 1px;//(上下左右)

 

CSS3样式

多颜色边框border-colors

border-colors:<color><color>……

border: 10px solid black;
-moz-border-top-colors: red green;
-moz-border-right-colors: green yellow;
-moz-border-bottom-colors: yellow blue;
-moz-border-left-colors: blue red;    

　　[注意]只有firefox支持，需要加-moz-前缀，且只能四条边分开写，否则无效

 http://123.kzwr.com/ZNL/

圆角边框border-radius(IE8-不支持)

border-radius: none(默认)
border-radius: <length>{1,4}[/<length>{1,4}]?
//如果反斜杠存在，前面的值是水平方向的半径，后面的值是垂直方向的半径。如果没有则水平和垂直方向相等。

　　四值顺序是左上、右上、右下、左下

　　[注意1]<length>可以是具体值，也可以是百分比，但不是负数

　　[注意2]重置border-radius没有圆角，使用none无效，需要取值0

　　[注意3]border-radius对<img>没有任何效果

 【圆角单角】

border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius
border-top-left-radius: 10px 20px;

　　[注意]写圆角单角时不可加/

【四值顺序】

　　四值顺序是左上、右上、右下、左下

border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;

【内径外径】

　　border-radius内径 = 外径 - 对应的边框宽度

　　当border-radius半径值小于等于边框宽度时，元素没有内径效果

【特殊图形】

圆形

　　元素的宽高相同，且圆角半径为宽高的一半

div{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

半圆

　　元素宽高不同，且圆角半径与宽高要配合

div{
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
}

扇形

　　元素宽高及一个圆角半径相同

div{
    width: 50px;
    height: 50px;
    border-radius: 50px 0 0 0;
}    

椭圆

　　元素宽高不同，且水平和垂直半径分别对应宽高

div{
    width: 120px;
    height: 80px;
    border-radius: 120px/80px;
}    

 

盒子阴影box-shadow

box-shadow: none(默认)
box-shadow: (h-shadow v-shadow blur spread color inset)+;

h-shadow: 水平阴影位置(必须)
v-shadow: 垂直阴影位置(必须)
blur:     模糊距离(可选)
spread:   阴影尺寸(可选)
color:    阴影颜色，默认和文本颜色一致(可选)
inset:    内部阴影(可选)    

box-shadow:10px 10px red,20px 20px blue;

　　[注意1]可以使用多重阴影，但使用过多会造成性能差

　　[注意2]边框在内阴影之上，内阴影在背景图片之上，背景图片在背景色之上，背景色在外阴影之上

　　[注意3]内阴影对<img>元素没有任何效果

　　[注意4]最先写的阴影在最顶层

【模拟边框】

box-shadow: 0 0 0 10px blue;

　　 <演示框>点击下列相应属性值可进行演示

 

图片边框border-image(IE10-不支持)

border-image: none(默认)
border-image: border-image-source || border-image-slice [ / border-image-width? | / border-image-outset ]? || border-image-repeat;

　　[注意]该属性的作用是用来替代border-style的，若border-image为none,则显示border-style的值

border-image: url('img.img') 27 fill / 27 / 27px repeat;

【border-image-source】

　　边框的图片路径

border-image-source:url('test.img');

【border-image-slice】

　　图片边框四条切割线的位置

border-image-slice:  <number> | <percentage> fill

　　[注意0]不给写单位，具体值默认单位是px

　　[注意1]fill表示图片边框的中间部分将保留下来

　　[注意2]四值方向是上右下左，代表切割线的方向，切割的分别是高宽高宽

　　[注意3]图片边框是在边框范围内显示的，若边框宽度不等于slice切片值，则图片边框会按比例放大缩小，以使图片边框正好显示在边框范围内

　　[注意4]若slice值为负，或大于盒子的宽度或高度会被100%，四个角将显示整个背景图片

　　[注意5]若右切和左切大于盒子宽度，则上中和下中部分为空；若上切和下切大于盒子高度，则左中和右中部分为空

【border-image-width】

　　边框宽度

border-image-width: <length> | <percentage> | <number> | auto  

　　[注意1]若指定则边框图片宽度由该值确定，否则由盒子的边框宽度来确定

　　[注意2]可以用具体像素、数字(表示几倍)以及百分比来表示

　　[注意3]遵循四值顺序

【border-image-outset】

　　边框图像区域超出边框的量

border-image-outset:0(默认)
border-image-outset: <length> | <number>

　　[注意1]可以用具体像素和数字(表示几倍)来表示

　　[注意2]遵循四值顺序

【border-image-repeat】

　　边框图片的排列方式

border-image-repeat: stretch(拉伸,默认) | repeat(重复) | round(平铺) [1,2]
//第一个值表示水平方向的排列方式，第二个值表示垂直方向的排列方式

　　[注意1]repeat是边框中间向两端平铺，可能造成两端边缘被切的现象

　　[注意2]round会对边框背景图的切片进行缩放，使其正好显示

 【按钮实现】

div{
    display: inline-block;
    border-image: url('button.png') 16 fill/ auto / 5px;
}

 

注意事项

　　【1】边框绘制在元素背景之上(有兼容问题)

　　【2】同一元素的边框相交处是斜线

　　【3】可以用边框实现三角形

　　【4】行内元素的上下边框由于不影响行高，不影响布局；左右边框会影响布局