你的位置:首页 > 网页设计

[网页设计]理解CSS边框


目录
[1]基础样式 边框样式 边框宽度 边框颜色 [2]四值顺序 [3]CSS3样式 border-colors border-radius box-shadow border-image [4]注意事项

基础样式

边框

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

border: border-width border-color border-styleborder: 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-widthborder-style:  border-top-style  border-right-style  border-bottom-style  border-left-styleborder-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-前缀,且只能四条边分开写,否则无效

 

圆角边框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-radiusborder-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会对边框背景图的切片进行缩放,使其正好显示

 

注意事项

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

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

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

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