购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS 边框(Border)

CSS 边框(Border)
元素的边框是围绕元素内容和内边距的一条线或者多条线 ,它允许设置元素边框的样式、宽度和颜色
编辑:前端控 前端控 更新时间:2019-03-22 14:16:54

CSS Border(边框) 

元素的边框 (border) 是围绕元素内容和内边距的一条线或者多条线

CSS border 属性允许设置元素边框的样式、宽度和颜色

边框样式

border-style属性用来定义边框的样式

border-style的值:

描述
none默认无边框
dotted定义一个点状边框
dashed定义一个虚线边框
solid定义实线边框
double定义两个边框。 两个边框的宽度和 border-width 的值相同
groove定义3D沟槽边框
ridge:定义3D脊边框
inset定义一个3D的嵌入边框
outset定义一个3D突出边框

实例

<p style="border-style:none;">
   none:无边框
</p>
<p style="border-style:dotted;">
   dotted:点状边框
</p>
<p style="border-style:dashed;">
    dashed: 虚线边框
</p>
<p style="border-style:solid;">
    solid: 实线边框
</p>
<p style="border-style:double;">
    double: 两个边框
</p>
<p style="border-style:groove;">
    groove: 3D沟槽边框
</p>
<p style="border-style:ridge;">
    ridge: 3D脊边框
</p>
<p style="border-style:inset;">
    inset:3D的嵌入边框
</p>
<p style="border-style:outset;">
    outset:3D突出边框
</p>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

边框宽度

border-width 属性可以为边框指定宽度

指定宽度的两种方法:直接指定数值、或者关键字(thick、medium(默认值)、thin)

实例

<p style="border-style:none;border-width: thick;">
   none:无边框
</p>
<p style="border-style:dotted;border-width: thick;">
   dotted:点状边框
</p>
<p style="border-style:dashed;border-width: thick;">
    dashed: 虚线边框
</p>
<p style="border-style:solid;border-width: thick;">
    solid: 实线边框
</p>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

边框颜色:

border-color 属性可以设置边框的颜色,可以使用任何类型的颜色值

实例

<p style="border-style:none;border-color:pink;">
   none:无边框
</p>
<p style="border-style:dotted;border-color:pink;">
   dotted:点状边框
</p>
<p style="border-style:dashed;border-color:pink;">
    dashed: 虚线边框
</p>
<p style="border-style:solid;border-color:pink;">
    solid: 实线边框
</p>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 29.jpg

注意:如果未声明边框颜色,则与文本颜色相同;若元素中没有任何文本,则边框颜色就是其父元素的文本颜色

单独设置边框:

实例

p{  width:100px;
			height: 100px;
			border-left-style: dotted;
			border-top-style: dashed;
			border-right-style:solid;
			border-bottom-style:ridge;
			border-left-color:#F9AFF1;
			border-top-color:#FF97FE;
			border-right-color:#E35CF1;
			border-bottom-color:#C319F6;

		}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 31.jpg

CSS边框属性

属性描述
border简写属性,用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color设置元素的下边框的颜色。
border-bottom-style设置元素的下边框的样式。
border-bottom-width设置元素的下边框的宽度。
border-left简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color设置元素的左边框的颜色。
border-left-style设置元素的左边框的样式。
border-left-width设置元素的左边框的宽度。
border-right简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color设置元素的右边框的颜色。
border-right-style设置元素的右边框的样式。
border-right-width设置元素的右边框的宽度。
border-top简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color设置元素的上边框的颜色。
border-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。


网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号