首页 web前端 css教程 分享div加一个边框样式的示例代码

分享div加一个边框样式的示例代码

Jul 19, 2017 am 11:18 AM
样式 示例 边框

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

对div盒子加一个边框样式很简单只需要使用border板块样式即可。

一、虚线与实线边框   -   TOP

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

border:1px dashed #000
登录后复制

代表设置对象边框宽度为1px黑色虚线边框

border:1px solid #000
登录后复制


代表设置对象边框宽度为1px黑色实现边框

二、对div上边加边框 - TOP

我们给div上边加1px黑色边框

div{border-top:1px solid #000}
登录后复制

三、给div底部加边框 - TOP

给div盒子底部加2px虚线红色边框

div{border-bottom:2px dashed #F00}
登录后复制

四、在div盒子左侧加边框 - TOP

给一个css选择器 css命名为“.divcss5”盒子左侧加一个蓝色1px实线边框

.divcss5{ border-left:1px solid #00F}
登录后复制

DIV代码:

<div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div>
登录后复制

五、在盒子div右侧加边框 - TOP

div对象右侧加1px红色实线边框

div{ border-right:1px solid #F00}
登录后复制

六、在盒子上下加边框 - TOP

给盒子上下加1px实现黑色边框

div{border-top:1px solid #000;border-bottom:1px solid #000}
登录后复制

七、给div盒子左右加边框 - TOP

给盒子左右加2px虚线绿色边框

div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}
登录后复制

八、给div四边加上一个边框 - TOP

给一个DIV四边加上3px实现黑色边框

div{ border:3px solid #000}
登录后复制

以上是分享div加一个边框样式的示例代码的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Windows 11 上调整窗口边框设置的方法:更改颜色和大小 Windows 11 上调整窗口边框设置的方法:更改颜色和大小 Sep 22, 2023 am 11:37 AM

Windows11将清新优雅的设计带到了最前沿;现代界面允许您个性化和更改最精细的细节,例如窗口边框。在本指南中,我们将讨论分步说明,以帮助您在Windows操作系统中创建反映您的风格的环境。如何更改窗口边框设置?按+打开“设置”应用。WindowsI转到个性化,然后单击颜色设置。颜色更改窗口边框设置窗口11“宽度=”643“高度=”500“&gt;找到在标题栏和窗口边框上显示强调色选项,然后切换它旁边的开关。若要在“开始”菜单和任务栏上显示主题色,请打开“在开始”菜单和任务栏上显示主题

macOS:如何更改桌面小部件的颜色 macOS:如何更改桌面小部件的颜色 Oct 07, 2023 am 08:17 AM

在macOSSonoma中,小部件不必隐藏在屏幕外,也不必像在以前版本的Apple的macOS中那样在通知中心面板中被遗忘。相反,它们可以直接放置在Mac的桌面上–它们也是交互式的。不使用时,macOS桌面小部件会采用单色样式淡入背景,从而减少干扰,并允许您专注于活动应用程序或窗口中手头的任务。但是,当您单击桌面时,它们将恢复为全彩色。如果您更喜欢单调的外观,并且希望在桌面上保留这一方面的统一性,那么有一种方法可以使其永久化。以下步骤演示了它是如何完成的。打开“系统设置”应用

Python函数介绍:exec函数的介绍及示例 Python函数介绍:exec函数的介绍及示例 Nov 03, 2023 pm 02:09 PM

Python函数介绍:exec函数的介绍及示例引言:在Python中,exec是一种内置函数,它用于执行存储在字符串或文件中的Python代码。exec函数提供了一种动态执行代码的方式,使得程序可以在运行时根据需要生成、修改和执行代码。本文将介绍exec函数的使用方法,并给出一些实际的代码示例。exec函数的使用方法:exec函数的基本语法如下所示:exec

Go语言的缩进规范及示例 Go语言的缩进规范及示例 Mar 22, 2024 pm 09:33 PM

Go语言的缩进规范及示例Go语言是一种由Google开发的编程语言,它以简洁、清晰的语法着称,其中缩进规范在代码的可读性和美观性方面起着至关重要的作用。本文将介绍Go语言的缩进规范,并通过具体的代码示例进行详细说明。缩进规范在Go语言中,缩进使用制表符(tab)而非空格。每级缩进为一个制表符,通常设置为4个空格的宽度。这样的规范统一了代码风格,使得团队合作编

如何在 Microsoft Word 中制作自定义边框 如何在 Microsoft Word 中制作自定义边框 Nov 18, 2023 pm 11:17 PM

想让你的学校项目的头版看起来令人兴奋吗?没有什么比工作簿首页上的漂亮、优雅的边框更能使其从其他提交中脱颖而出了。但是,MicrosoftWord中的标准单行边框已经变得非常明显和无聊。因此,我们展示了在MicrosoftWord文档中创建和使用自定义边框的步骤。如何在MicrosoftWord中制作自定义边框创建自定义边框非常容易。但是,您将需要一个边界。第1步–下载自定义边框互联网上有大量的免费边界。我们已经下载了一个这样的边框。第1步–在Internet上搜索自定义边框。或者,您可以转到剪贴

Oracle DECODE函数详解及用法示例 Oracle DECODE函数详解及用法示例 Mar 08, 2024 pm 03:51 PM

Oracle中的DECODE函数是一种条件表达式,常用于在查询语句中根据不同的条件返回不同的结果。本文将详细介绍DECODE函数的语法、用法和示例代码。一、DECODE函数语法DECODE(expr,search1,result1[,search2,result2,...,default])expr:要进行比较的表达式或字段。search1,

Python函数介绍:abs函数的用法和示例 Python函数介绍:abs函数的用法和示例 Nov 03, 2023 pm 12:05 PM

Python函数介绍:abs函数的用法和示例一、abs函数的用法介绍在Python中,abs函数是一个内置函数,用于计算给定数值的绝对值。它可以接受一个数字参数,并返回该数字的绝对值。abs函数的基本语法如下:abs(x)其中,x是要计算绝对值的数值参数,可以是整数或浮点数。二、abs函数的示例下面我们将通过一些具体的示例来展示abs函数的用法:示例1:计算

excel边框设置方法科普 excel边框设置方法科普 Mar 20, 2024 am 10:30 AM

Excel出现在我们日常工作和生活中已经不是一件罕见的事情了,无论是员工信息、工资表的制作或者是学生入学信息和成绩单的制作,Excel都是一款比较好用的工具。当要对Excel进行打印的时候需要设置边框来实现打印需求。本文小编为大家科普几个Excel边框设置方法。方法1、利用功能选项卡按钮,这应该是大家经常用的方法,方便快捷,具体操作:选中需要添加边框的单元格区域B2:H10,依次点击【开始】选项卡-【边框】右侧下拉按钮-【所有框线】,完成添加框线。方法2、选中需要添加边框的单元格区域B2:H10

See all articles