CSS边框border

边框是CSS盒模型属性中默默无闻的一个普通属性，CSS3的到来，但得边框属性重新焕发了光彩。本文将详细介绍CSS边框边框是一条以空格分隔的集合样式，包括边框粗细(边框宽度)、边框颜色和边框样式，且先后顺序无关【边框样式】如果一个边框没有样式，边框将根本不会存在关于虚线dashed，在chrome/firefox下，虚线宽高比是3/1；而在IE下，虚线宽高比为2/1。所以在IE下虚线显得比较密关于点线dotted，在chrome下，点线是方点；而在IE/firefox下，点线是圆点【边框宽度】边框的宽度不能为负，不能指定为百分比值。这是因为，边框并不会因为设备尺寸变大，所以百分比单位并不符合语义。类似地，还有outline、box-shadow、text-shadow等边框宽度支持3个关键字：this/medium/thick，分别是1px、3px、5px，且medium为默认值。medium为3px是因为边框样式double至少为3px为有效果【边框颜色】默认的边框颜色是元素本身的前景色，即元素的文本颜色；如果元素没有任何文本，则边框颜色是其父元素的文本颜色。但是，在表格中，若只设置border-style，而不设置border,则边框颜色为黑色，而不与文本颜色相同。类似地，还有text-shadow、box-shadow等[注意]在CSS2.1中，背景定位background-position只能相对于左上角定位。如果需要是相对于右侧，则可以使用一个右侧的透明边框来实现类似的效果点击下列相应属性值可进行演示【注意事项】边框有以下几个要点需要特别注意：1、边框绘制在元素背景之上，如果边框样式有某种缝隙，可以通过这些缝隙看到元素的背景(有兼容问题)2、同一元素的边框相交处是斜线，可以用边框实现三角形3、行内元素的上下边框由于不影响行高，不影响布局；左右边框会影响布局4、在CSS2.1中，背景定位background-position只能相对于左上角定位。如果需要是相对于右侧，则可以使用一个右侧的透明边框来实现类似的效果【边框单边】【边框属性】【四值顺序】多色边框border-colors可以在一条边框上设置多种颜色[注意]只有firefox支持，需要加-moz-前缀，且只能四条边分开写，否则无效圆角边框border-radius可以为边框设置圆角(IE8-不支持)，四值顺序是左上、右上、右下、左下关于圆角边框有如下注意事项：1、可以是具体值，也可以是百分比，但不是负数2、重置border-radius没有圆角，使用none无效，需要取值03、border-radius对没有任何效果4、如果取值为百分比，水平方向圆角百分比相对于宽度，垂直方向圆角百分比相对于高度【圆角单角】[注意]写圆角单角时不可加/【四值顺序】四值顺序是左上、右上、右下、左下【内径外径】border-radius内径 = 外径 – 对应的边框宽度当border-radius半径值小于等于边框宽度时，元素没有内径效果【特殊图形】圆形元素的宽高相同，且圆角半径为宽高的一半半圆元素宽高不同，且圆角半径与宽高要配合扇形元素宽高及一个圆角半径相同椭圆元素宽高不同，且水平和垂直半径分别对应宽高盒子阴影box-shadow可以为元素设置阴影(IE8-不支持)使用盒子阴影box-shadow时，有如下几点注意事项：1、可以使用多重阴影，但使用过多会造成性能差2、边框在内阴影之上，内阴影在背景图片之上，背景图片在背景色之上，背景色在外阴影之上3、内阴影对元素没有任何效果4、最先写的阴影在最顶层5、该属性与border-radius一脉相承，若通过bo免费云主机域名rder-radius设置为圆角，则box-shadow的最终呈现也将是圆角【模拟边框】点击下列相应属性值可进行演示图片边框border-p_w_picpath可以在边框位置设置图片(IE10-不支持)[注意]该属性的作用是用来替代border-style的，若border-p_w_picpath为none，则显示border-style的值【border-p_w_picpath-source】边框的图片路径【border-p_w_picpath-slice】图片边框四条切割线的位置使用border-p_w_picpath-slice时，有如下几点注意事项：1、若不写单位，具体值默认单位是px2、fill表示图片边框的中间部分将保留下来3、四值方向是上右下左，代表切割线的方向，切割的分别是高宽高宽4、图片边框是在边框范围内显示的，若边框宽度不等于slice切片值，则图片边框会按比例放大缩小，以使图片边框正好显示在边框范围内5、若slice值为负，或大于盒子的宽度或高度会被100%，四个角将显示整个背景图片6、若右切和左切大于盒子宽度，则上中和下中部分为空；若上切和下切大于盒子高度，则左中和右中部分为空【border-p_w_picpath-width】边框宽度border-p_w_picpath-width。若指定该值，则边框图片宽度由该值确定，否则由盒子的边框宽度来确定。该值可以用具体像素、数字(表示几倍)以及百分比来表示，遵循四值顺序【border-p_w_picpath-outset】border-p_w_picpath-outset表示边框图像区域超出边框的量，可以用具体像素和数字(表示几倍)表示，遵循四值顺序【border-p_w_picpath-repeat】边框图片的排列方式在上面的属性值中，repeat是边框中间向两端平铺，可能造成两端边缘被切的现象；而round会对边框背景图的切片进行缩放，使其正好显示【按钮实现】【三道杠效果】【十字效果】【信封效果】可以使用图片边框border-p_w_picpath来实现航空信封的效果。图片边框使用线性渐变来实现

相关推荐: linux内核源码怎么看

本篇内容主要讲解“linux内核源码怎么看”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“linux内核源码怎么看”吧! linux的内核源码的位置一般在系统中的“/usr/src/linux内核版本”目录中；若系统…