Heim > Artikel > Web-Frontend > 理解CSS边框_html/css_WEB-ITnose
目录 [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
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;//(上下左右)
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: none(默认)border-radius: <length>{1,4}[/<length>{1,4}]?//如果反斜杠存在,前面的值是水平方向的半径,后面的值是垂直方向的半径。如果没有则水平和垂直方向相等。
四值顺序是左上、右上、右下、左下
[注意1]
[注意2]重置border-radius没有圆角,使用none无效,需要取值0
[注意3]border-radius对没有任何效果
【圆角单角】
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: 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]内阴影对元素没有任何效果
[注意4]最先写的阴影在最顶层
【模拟边框】
box-shadow: 0 0 0 10px blue;
点击下列相应属性值可进行演示
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】行内元素的上下边框由于不影响行高,不影响布局;左右边框会影响布局