HTML-用css样式定义div的边框样式

我们都知道html中div定义的是一个块，有时候我们需要给这个块增加一些边框来达到我们所需要的要求。

1.如何定义边框

如下所示我用css定义了这个边框的属性

<style>
.c{width:100px;height:100px;border-width: 1px;border-style: solid;border-color: black;
}
</style>
<body><div class="c"></div>
</body>

这是效果图

边框的宽度用border-width:设置

边框的类型用border-style:设置

边框虚线样式：dashed
边框实现样式：solid

2.有时候我们会用到这个div块的某个边框而不是四个边框我们该怎么设置呢

上面提到了，边框的宽度用border-width设置，那我们把他的某个边的宽度设为0，不就达到我们的目的了嘛，例如：

<style>
.c{width:100px;height:100px;border-width: 0px 0px 1px 0px ;border-style: solid;border-color: black;
}
</style>
<body><div class="c"></div>
</body>

我把border-width设为了0px 0px 1px 0px ;

注：1.这代表了div边框的四个边，顺序为上右下左，按顺时针
2.如果写两个值，第一个代表上下边框的值，第二个则代表左右边框的值
3.写三个值的话，第一个代表上边框，第二个代表左右边框，第三个代表下边框

HTML-用css样式定义div的边框样式相关推荐

css重新定义class,div样式_css定义div里面class样式
摘要腾兴网为您分享:css定义div里面class样式,一起发,小熊到家,听中国,软考题库等软件知识,以及教师节手工贺卡图片,158家电影,守护永恒之树,全能浏览器,快猫ios苹果,pp视频会员,铁 ...
纯css实现带斜角的边框样式
纯css实现带斜角的边框样式,是边框哦展示效果斜角优化前(百度上找到的方法) 斜角优化后(想了个花里胡哨的办法) 直接贴代码说明下原理展示效果斜角优化前(百度上找到的方法) 斜角优化后(想了 ...
html中div中加颜色,css怎样给div加边框颜色
css怎样给div加边框颜色 1.css为div四个边分别添加边框border-color:#000(设置4边边框颜色为黑色) border-color:+颜色值,即可设置对象边框颜色 border- ...
css设置html表格边框颜色,互联网常识：CSS如何设置htmltable表格边框样式
设置表格边框样式的方法:1.给table元素添加"border:边框宽度边框样式边框颜色"样式,可给整个表格设置边框样式:2.给td元素添加"border:边框宽度 ...
python-docx 设置Table 边框样式、单元格边框样式
python-docx 设置Table 边框样式.单元格边框样式 from docx.oxml.ns import qn from docx.oxml import OxmlElement from ...
CSS中定义多个链接样式,在CSS中定义【导航栏】超链接样式
1.案例css代码 .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标悬停黑色 */ .divcs ...
CSS设置原生table表格边框样式（添加表格横线）（附最后表格td画斜线）
table表格边框样式: 推荐这种原理: 只对table td设置左与上边框: 对table设置右与下边框: <style> .table-c table{border-right:1p ...
html div 虚线边框样式,纯CSS实现渐变虚线框和边框滚动动画
渐变虚线边框如果对边框的样式细节不是很在意,我们可以借助反向镂空的方法实现,也就是虚线原本实色的地方和周围颜色融为一体,看上去透明,而原来虚框透明的部分透出渐变背景色,于是看上去像是渐变色. 以下是 ...
css怎样定义div大小,css如何设置div大小
在css中,可以使用width属性和height属性来设置div大小,只需要给div元素设置"width:值"和"height:值"样式即可.width属性定义 ...