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

news/2025/1/12 1:06:13/

我们都知道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.写三个值的话,第一个代表上边框,第二个代表左右边框,第三个代表下边框


http://www.ppmy.cn/news/856575.html

相关文章

HTML设置边框的三种方式

HTML设置边框的三种方式 border-width: 1px 2px 2px; border-style: solid dashed dotted; border-color:red green blue; /*分别为 上→左右→下 边框设置*/ 1、边框的组成: border: 1px solid #fff 参数&#xff1a; 第一个是边框的粗细 1px 第二个是边框的样式 soli…

如何给div加一个边框border样式

如何给div加一个边框样式&#xff1f; 对div盒子加一个边框样式很简单只需要使用border板块样式即可。 一、虚线与实线边框 - TOP 边框虚线样式&#xff1a;dashed 边框实现样式&#xff1a;solid border:1px dashed #000 代表设置对象边框宽度为1px黑色虚线边框 borde…

html设置div边框的写法,设置div边框

设置装备摆设div边框border技俩 对div设置边框CSS5给大家引见三种法子。 首先找到边框CSS单词&#xff1a;border(边框border根本教程) 一、直接div标签内设置边框 1、div边框实例代码 设置装备摆设div边框厚度3px&#xff0c;实线血色边框 2、成效截图 style直接标签内设置div…

div边框颜色和背景颜色

div 边框填充颜色 <div style"border:1px solid #F60;width:100px;height:100px"></div> 背景 <div id"popImg" style"position:absolute;background-color:#3333FF; left:425px; top:134px;z-index: 1000;display: none ">js…

html 给div设置边框颜色代码,div边框颜色设置

div边框颜色 css设置div边框颜色 使用css对div边框设置颜色是常见CSS样式设置。对div边框颜色设置说需要css单词为border。 去了解相关教程:《CSS边框》教程 一、div四条边的边框颜色设置 如果不设置边框宽度粗细,只设置border-color颜色将是无效的。通常我们会简写边框样式代…

几种常见的DIV边框样式 和 边框宽度、颜色

<html> <head> <title>边框样式</title> </head> <body> <p styleborder-style:none>无边框</p> <p styleborder-style:dotted>点线式边框</p> <p styleborder-style:dashed>破折线式边框</p> <…

HTML如何给div容器设置大小,边框,背景颜色,位置

本次实验是在 Visual Studio Code软件里面所写 在<body>正文标签里面添加div容器&#xff0c;随便写几个字 <body><div>大家好&#xff0c;我是一名运维工程师</div> </body> 在<head>头部标签里面添加<style>样式标签 在style标…

div边框设置

一&#xff0e;彩色边框 &#xff1a;这里使用的是蓝色"blue" <div STYLE"border-style:solid;border-width:5pt; border-color:颜色">日志文字</div> 二&#xff0e;双线边框&#xff1a;这里使用的是"red" <div STYLE"b…