css中的边框样式

守給你的承諾、 提交于 2019-11-29 15:35:43

在盒子模型中,盒子的边框是其重要的样式,通过边框我们可以很方便地看出盒子的长宽以及大小。边框的特性可以通过边框线,边框的宽度及颜色来呈现。

1,边框线

边框线指的是边框线条的样式,包括实线,虚线,点划线等。其具体的使用如下:

border-style : none | hidden | dotted | dashed | solid | double | groove |ridge | inset  | outset 

 

例:

div { width:300px; height:100px; border-style:solid; }

 

在这里我们将一个长为300px,宽为100px的盒子设置了实线的边框,在默认的情况下边框也为实线。

我们也可以为某一个盒子设置多种不同的边框。此时要注明所要设置的边框的位置。如:border-top-style  设置上边框线

border-bottom-style  设置下边框线

border-left-style  设置左边框线

border-right-style  设置右边框线

2,宽度

设置边框的宽度可以使盒子的边框更加具有多样性,也方便了我们的观察。

border-width : medium | thin | thick | length 

 

同边框线一样,要为一个盒子设置多个不同的边框宽度,要用到下面的语法:

border-top-width  设置上边框宽度

border-bottom-width  设置下边框宽度

border-left-width  设置左边框宽度

border-right-width  设置右边框宽度

同时边框宽度的设置可以表现出不同的效果,例:

div{ width:0; height: 0;
       border-top: 100px solid #000;
       border-right: 100px solid ransparent; 
       border-left: 100px solid transparent; 

}

 

这里通过将盒子的宽高设置为0,并为其添加边框的宽度及颜色,从而实现了一个倒三角形图案的效果。

3,颜色

设置边框的颜色使用border-color样式:

border-color : color 

 

例:

div{width:200px;height:200px;border-color:black;border-width:2px;}

 

其属性值为一表现颜色的值,即英文单词或#ffffff和grb(0~255,0~255,0~255);其不同位置边框颜色的设置与上面的类似,在此不再赘述。

通常对于边框样式的设置我们直接使用简写的方式,即:

border : border-width || border-style || border-color  

这里面的三个值依次为宽度,线型和颜色,它们的顺序可以更改。其中边框的宽度必须设置值,否则在网页中看不到效果。其它两种在不设置的情况下,取默认值,及黑色的实线。

4,圆角

圆角是CSS3中新增加的边框样式,通过它,我们可以将盒子模型的外观设置得更加多样化。其用法如下:

border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

其属性值有1到4个不等,依次表示的是从左上角开始沿顺时针方向旋转的4个圆角的半径。

例:

div{ border-radius: 5px 4px 3px 2px; }

同时也可以设置每个圆角的垂直半径和水平半径,用斜杠隔开。

例:

div{ border-radius: 10px 20px 30px 40px  /  5px 10px 15px 20px; }

在这里对于圆角的半径做一下具体说明:

我们在确定了盒子模型中的一个角时,以其为中心点,向垂直方向平移的距离即为垂直半径,向水平方向的位移即为水平半径。具体的位移方向以盒子的中心方向为正。由此可以确定边框上的两个点,这两个点即为盒子圆角上弧线的起始点与终点。

5,盒子阴影

前面我们了解到文字的阴影效果,作为盒子模型自然也有其阴影效果。具体用法如下:

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径]  [阴影颜色] [投影方式];

其中后四个值是可选的。通常情况下,我们也为其设置了模糊半径即阴影颜色,这样盒子模型的阴影效果更加明显。

例:

div{ box-shadow: 5px 5px 5px  rgba(0, 0, 0, .6); } 

 对于其中的投影方式,一般不取值的情况下,它是指的向外投影,若对其经行取值,其值应为inset,即向内投影。

例:

div{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6) inset; }  

 阴影的模糊半径是表现阴影的效果的度量,其值取得越大,阴影效果表现得越明显。

6,边框图片

在css3中新增了边框的图片样式,这使得边框的表现效果更加丰富。其具体语法如下:

border-image:<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat'>

 其中border-image-slice : 是一个数值或百分比,不需要带单位(特指px)

例:

.test { border: 10px solid gray; border-image: url(test.png) 10/10px; }

通过边框图片的设置,我们可以做到更多边框的绚丽效果。

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!