Heim  >  Artikel  >  Web-Frontend  >  理解CSS边框_html/css_WEB-ITnose

理解CSS边框_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:32:181418Durchsuche

目录 [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]可以是具体值,也可以是百分比,但不是负数

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

  [注意3]border-radius对理解CSS边框_html/css_WEB-ITnose没有任何效果

 【圆角单角】

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]内阴影对理解CSS边框_html/css_WEB-ITnose元素没有任何效果

  [注意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】行内元素的上下边框由于不影响行高,不影响布局;左右边框会影响布局

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn