`
Java_1010
  • 浏览: 8763 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

边框样式

 
阅读更多

在之前的画三角形的文章中已经提到了边框(border)的样式,在此呢简单总结一下。

边框(border)分为三部分:宽度、样式、颜色。

同时边框按方向分又分为4个方向(已顺时针为例):上、右、下、左。

1、边框的基本样式:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>边框样式</title>
		<style>
			#div1 {
				width:200px;
				height:200px;
				border: 5px solid red;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

 border:5px  solid  red   表示边框的样式为:粗细程度为5px,样式为solid(实线),颜色为red(红色)。

这三个值的顺序可随意调整,但是各个值之间要以空格分隔。

边框样式分为:solid(实线)、dotted(点线)、dashed(虚线)。dotted和dashed的效果在不同的浏览器上会有细微的不同。

边框颜色可以使用三种方式来定义:

1、颜色英文。如:red、blue、green等等

2、RGB颜色值。如:rgb(204,249,252)

3、16进制颜色值。如:#ccf9fc

 

2、边框方向:

默认情况下只写border的话设置的是4个边框的样式。

4个边框分别为:上、右、下、左。

border-top:上边框

border-right:右边框

border-bottom:下边框

border-left:左边框

4个边框的样式这是方式同border的样式设置,在此不做解释。

需要注意的一个地方是在这是边框样式的时候如果需要将边框隐藏,可以将边框的颜色值设置为transparent,即表示隐藏。如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>边框样式</title>
		<style>
			#div1 {
				width:200px;
				height:200px;
				border-right:30px solid transparent;
				border-bottom:30px solid green;
				border-left:30px solid transparent;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

 

如果要设置某个没有某个边框,可以使用none。如:border-top:none;表示没有上边框。

 

 边框样式到此结束,以后将会进一步更新。

 

分享到:
评论

相关推荐

    ArcGIS地图边框样式

    本主题聚焦于“ArcGIS地图边框样式”,这是一个关键的制图元素,能够显著提升地图的视觉效果和专业性。边框样式不仅能够为地图增添结构感,还能帮助用户更好地组织和突出地图中的不同区域或信息。 ArcGIS提供了丰富...

    自定义高级表格边框样式.rar

    在Excel或其他电子表格软件中,自定义高级表格边框样式是一项重要的技能,它能帮助用户创建具有专业外观的表格,以更好地展示数据和信息。本文将深入探讨如何自定义表格边框,包括设置线条样式、颜色、宽度以及应用...

    很好的图片边框样式全集

    在网页设计中,图片的边框样式是提升页面视觉效果的重要元素之一。"很好的图片边框样式全集" 提供了一系列用于美化图片边框的方法,适用于网页动态图片,旨在实现页面元素的一致性和美观性。这些样式设计既简单易用...

    几种常见的DIV边框样式

    几种常见的DIV边框样式

    缩略图边框样式、图片边框样式大全

    "缩略图边框样式、图片边框样式大全"这个资源包提供了一系列丰富的CSS样式,旨在帮助开发者轻松实现各种美观的边框设计,以增强图片和缩略图的表现力。下面将详细探讨这些知识点: 1. **CSS边框样式**: CSS(层叠...

    易语言自定义组件边框样式例程

    在本例程中,“易语言自定义组件边框样式例程”关注的是如何通过编程来改变组件(控件)的边框样式,使得用户界面更加个性化和美观。 在Windows系统中,窗口和组件的边框样式通常是预设的,但通过API函数,我们可以...

    表格边框样式大全

    以下是对“表格边框样式大全”这一主题的详尽解读: ### 一、基础边框样式 首先,最基础的边框样式可通过`border`属性来定义,它接受一个宽度值、一条线型和一个颜色值。例如,`border: 1px solid #000;`表示创建...

    易语言自定义高级表格边框样式例程

    在“易语言自定义高级表格边框样式例程”这个项目中,我们主要探讨的是如何利用易语言来实现对表格边框样式的高级定制。 在Windows应用程序开发中,表格控件通常用于展示结构化数据,而其边框样式则直接影响到用户...

    自定义高级表格边框样式例程.rar

    在Excel或其他电子表格软件中,自定义高级表格边框样式是一项重要的技能,它能帮助用户创建具有专业外观的报告和数据分析表。这个“自定义高级表格边框样式例程.rar”压缩包文件很可能是提供了一组示例或教程,教导...

    jxl入门教程实例及边框样式、背景样式

    该实例是jxl工具的入门代码。jxl是java对excel操作的开源工具,可以...其中,BorderLineOfJxl.java是展示jxl的单元格边框样式。 ColourOfJxl.java是展示jxl的单元格背景样式。 JxlTest.java是我blog里的jxl介绍的代码。

    易语言自定义高级表格边框样式

    在易语言中,实现自定义高级表格边框样式涉及到对窗口和控件的操作,以及Windows API的调用。在这个特定的案例中,`SetWindowLongA` 和 `GetWindowLong` 是两个关键的API函数,它们用于修改和获取窗口或控件的额外...

    vba 设置边框样式vba 设置边框样式vba 设置边框样式

    vba 设置边框样式vba 设置边框样式vba 设置边框样式

    完整版自定义高级表格边框样式例程.rar

    在IT领域,尤其是在数据分析、报表制作或文档处理中,自定义高级表格边框样式是一项重要的技能。这不仅可以提升数据的可读性,还能使报告更具专业性和吸引力。"完整版自定义高级表格边框样式例程.rar" 提供的正是...

    自定义高级表格边框样式例程.e.rar

    在Excel或其他电子表格软件中,自定义高级表格边框样式是一项重要的功能,它允许用户根据需求创建独特的表格设计,以增强数据的可读性和视觉吸引力。这个“自定义高级表格边框样式例程.e.rar”文件很可能是包含了一...

    易语言源码自定义高级表格边框样式.7z

    在这个“易语言源码自定义高级表格边框样式.7z”压缩包中,我们可以看到是关于易语言如何实现自定义高级表格边框样式的源代码示例。下面,我们将深入探讨这个主题,了解如何在易语言中创建和调整表格边框样式。 ...

Global site tag (gtag.js) - Google Analytics