> 웹 프론트엔드 > HTML 튜토리얼 > 8.css边框_html/css_WEB-ITnose

8.css边框_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:17:16
원래의
999명이 탐색했습니다.

  其实,与其将css盒模型称为是一个盒子,我更愿意将其称为卡片,或者是图画。因为相对于盒子的三维特效,网页的元素更像是二维的图画。而我们之间对元素尺寸之类的调整,更像是对画布的调整。

  但是,就像我可以为一幅画配一个画框一样,我也可以为元素设置一个边框。

属性 说明 CSS 版本
border-width 长度值 设置边框的宽度,可选  1
border-style 样式名称 设置边框的样式,必选  1
border-color 颜色值 设置边框的颜色,可选  1

  这三个属性值,只有 border-style 是必须声明,才可以出现边框。而其他两个属性会出现默认值,宽度默认为3px,颜色默认为黑色。

/*简单设置*/div {     border-style: solid; }/*完整设置*/div {     border-style: solid;     border-width: 2px;     border-color: red; }
로그인 후 복사

  注意:当我为画镶嵌一个画框后,把它拿到美术馆(也就是网页)去展览的是时候,美术馆里的参观者看到的画的大小就不再是画布的大小了,而是画布加上边框的。而这里边框的设置是针对其中的一条边的,也就是真正的宽度和高度应该变成:画布的+边框一条边的*2。

  下面总结了各属性的详细用法。

1.边框的宽度

说明
长度值 CSS 长度值:比如 px、em 等
百分数 直接设置百分数:1、2、3 等
thin 使用长度名称的预设宽度。这三个值的具体意义由浏 览器来定义,从小到大依次增大
medium
thick

2.边框的样式

说明
none 没有边框
dashed 破折线边框
dotted 圆点线边框
double 双线边框
groove 槽线边框
inset 使元素内容具有内嵌效果的边框
outset 使元素内容具有外凸效果的边框
ridge 脊线边框
solid 实线边框

3.边框的颜色

  边框的颜色其实没有什么特别的值,其设置方法可以参考css的颜色这篇博客。

4.分别定制

  以上的设置方法都是针对四条边的,相当于买了一套边框。但是,我们可以按照自己的需求分别对四条边进行定制。

属性 说明 CSS 版本

border-top-width

border-top-style

border-top-color

定义顶端 1

border-bottom-width

border-bottom-style

border-bottom-color

定义底部 1

border-left-width

border-left-style

border-left-color

定义左侧 1

border-right-width

border-right-style

border-right-color

定义右边 1

/*只要其中的一条边*/div {     border-top-style: solid;     border-top-width: 10px;     border-top-color: red; }
로그인 후 복사

5.简写设置

  为了提高销量,商家还提高了快速下单服务,当四条变都一致,那么没必要分写成三句样式,直接通过简写即可

属性 说明 CSS 版本
border <宽度> <样式> <颜色> 设置四条边的边框 1
border-top 只设置上边框
border-bottom 只设置下边框
border-left 只设置左边框
border-right 只设置右边框

/*简写形式四条边设置 */div {     border: 10px solid red; }
로그인 후 복사

6.圆角边框

  虽然商家提供了各种样式的边框,但是这些边框都是方方正正的,为了满足顾客的要求,商家又去拿了一批新货,开始提供圆角边框了。

属性 说明 CSS 版本
border-radius 长度值或百分数 四条边角 3
border-top-left-radius 左上边角
border-top-right-radius 右上边角
border-bottom-left-radius 左下边角
border-bottom-right-radius 右下边角

/*设置圆角矩形*/div {     border: 10px solid red;     border-radius: 10px; }/*四条边分别设置*/div {     border: 10px solid red;     border-radius: 10px 20px 30px 40px; }
로그인 후 복사

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿