快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

CSS边框border-创新互联

边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩。本文将详细介绍CSS边框

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、网络空间、营销软件、网站建设、班玛网站维护、网站推广。

基础样式

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

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

【边框样式】

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

关于虚线dashed,在chrome/firefox下,虚线宽高比是3/1;而在IE下,虚线宽高比为2/1。所以在IE下虚线显得比较密

关于点线dotted,在chrome下,点线是方点;而在IE/firefox下,点线是圆点

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

【边框宽度】

边框的宽度不能为负,不能指定为百分比值。这是因为,边框并不会因为设备尺寸变大,所以百分比单位并不符合语义。类似地,还有outline、box-shadow、text-shadow等

边框宽度支持3个关键字:this/medium/thick,分别是1px、3px、5px,且medium为默认值。medium为3px是因为边框样式double至少为3px为有效果

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

【边框颜色】

默认的边框颜色是元素本身的前景色,即元素的文本颜色;如果元素没有任何文本,则边框颜色是其父元素的文本颜色。但是,在表格中,若只设置border-style,而不设置border,则边框颜色为黑色,而不与文本颜色相同。类似地,还有text-shadow、box-shadow等

    border-color: transparent/

[注意]在CSS2.1中,背景定位background-position只能相对于左上角定位。如果需要是相对于右侧,则可以使用一个右侧的透明边框来实现类似的效果

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

边框要点

【注意事项】

边框有以下几个要点需要特别注意:

1、边框绘制在元素背景之上,如果边框样式有某种缝隙,可以通过这些缝隙看到元素的背景(有兼容问题)

2、同一元素的边框相交处是斜线,可以用边框实现三角形

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

4、在CSS2.1中,背景定位background-position只能相对于左上角定位。如果需要是相对于右侧,则可以使用一个右侧的透明边框来实现类似的效果

【边框单边】

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

【边框属性】

    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;//(上下左右)

多色边框

多色边框border-colors可以在一条边框上设置多种颜色

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

    border-colors:……    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;

CSS边框border

圆角边框

圆角边框border-radius可以为边框设置圆角(IE8-不支持),四值顺序是左上、右上、右下、左下

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

关于圆角边框有如下注意事项:

1、可以是具体值,也可以是百分比,但不是负数

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

3、border-radius对没有任何效果

4、如果取值为百分比,水平方向圆角百分比相对于宽度,垂直方向圆角百分比相对于高度

【圆角单角】

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;
}
CSS边框border CSS边框border CSS边框border CSS边框border

盒子阴影

盒子阴影box-shadow可以为元素设置阴影(IE8-不支持)

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;

使用盒子阴影box-shadow时,有如下几点注意事项:

1、可以使用多重阴影,但使用过多会造成性能差

2、边框在内阴影之上,内阴影在背景图片之上,背景图片在背景色之上,背景色在外阴影之上

3、内阴影对元素没有任何效果

4、最先写的阴影在最顶层

5、该属性与border-radius一脉相承,若通过border-radius设置为圆角,则box-shadow的最终呈现也将是圆角

【模拟边框】

box-shadow: 0 0 0 10px blue;

CSS边框border

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

图片边框

图片边框border-p_w_picpath可以在边框位置设置图片(IE10-不支持)

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

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

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

【border-p_w_picpath-source】

边框的图片路径

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

【border-p_w_picpath-slice】

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

border-p_w_picpath-slice:   |  fill

使用border-p_w_picpath-slice时,有如下几点注意事项:

1、若不写单位,具体值默认单位是px

2、fill表示图片边框的中间部分将保留下来

3、四值方向是上右下左,代表切割线的方向,切割的分别是高宽高宽

4、图片边框是在边框范围内显示的,若边框宽度不等于slice切片值,则图片边框会按比例放大缩小,以使图片边框正好显示在边框范围内

5、若slice值为负,或大于盒子的宽度或高度会被100%,四个角将显示整个背景图片

6、若右切和左切大于盒子宽度,则上中和下中部分为空;若上切和下切大于盒子高度,则左中和右中部分为空

CSS边框border CSS边框border

【border-p_w_picpath-width】

边框宽度border-p_w_picpath-width。若指定该值,则边框图片宽度由该值确定,否则由盒子的边框宽度来确定。该值可以用具体像素、数字(表示几倍)以及百分比来表示,遵循四值顺序

border-p_w_picpath-width:  |  |  | auto

【border-p_w_picpath-outset】

border-p_w_picpath-outset表示边框图像区域超出边框的量,可以用具体像素和数字(表示几倍)表示,遵循四值顺序

border-p_w_picpath-outset:0(默认)border-p_w_picpath-outset:  | 

【border-p_w_picpath-repeat】

边框图片的排列方式

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

在上面的属性值中,repeat是边框中间向两端平铺,可能造成两端边缘被切的现象;而round会对边框背景图的切片进行缩放,使其正好显示

【按钮实现】

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

CSS边框border

应用

【三道杠效果】

  三道杠可以使用边框来实现,上面两道杠使用上边框的double样式,下面一道杠使用下边框的solid样式

【十字效果】

【信封效果】

可以使用图片边框border-p_w_picpath来实现航空信封的效果。图片边框使用线性渐变来实现

请修改文字

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页标题:CSS边框border-创新互联
链接URL:http://6mz.cn/article/ddspig.html

其他资讯