首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS边框

CSS边框

作者头像
十月梦想
发布2018-08-29 10:27:03
3.1K0
发布2018-08-29 10:27:03
举报
文章被收录于专栏:十月梦想十月梦想

1.边框属性

1.简写方式

border:width style color;

width: 以px为单位

div{width:200px;  /*定义边框的宽度*/
height:150px;    /*定义边框的高度*/
border:2px solid rgb(153, 0, 255)} /*border:边框线像素 样式  颜色*/

</style>

style取值

solid    代表实线

dotted   代表点状虚线

dashed   代表块状虚线

#d1{width:200px;
height:150px;
border:2px solid rgb(153, 0, 255)}
#d2{width:200px;
height:150px;
border:2px dotted rgb(0, 255, 242)}
#d3{width:200px;
height:150px;
border:2px dashed rgb(153, 0, 0)}

</style>

color

取值

英文

16进制

rgb

rgba

transparent  代表透明的颜色

2.单边框定义

border-方向:width style color(border对应分别是宽度 样式 颜色中间空格隔开。)

方向取值

top

right

bottom

left

div{width:200px;
height:100px;
border-top:1px solid red;
border-right:1px dashed green;
border-bottom:1px dotted orange;
border-left:1px dashed pink;
}

3.单属性设置

语法

border-属性

属性取值

width:

style:

color:

border:0 去除边框

div{width:100px;
height:60px;
border-width:1px;
border-style:dotted;
border-color:rgba(255,0,255,0.6)}
</style>

首先进行边框大小的width和height设置,然后逐一设置border的width,style和color。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-10-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档