CSS Border屬性之solid的使用介紹-css教學-PHP中文網

首頁

web前端

css教學

CSS Border屬性之solid的使用介紹

不言

Jun 12, 2018 am 11:11 AM

border邊框

這篇文章主要介紹了關於CSS Border屬性之solid的使用介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下Border（畫邊框），它是CSS的一個屬性，用它可以給能確定範圍的HTML標記（如TD、p等等）畫邊框，可以給文本加邊框，給導航菜單加分隔線，下面與大家分享個實例，有興趣的朋友可以了解下

製作過網頁的人都有為畫線而煩惱的經歷，先來認識一下「Border」（畫邊框），它是CSS的一個屬性，用它可以給能確定範圍的HTML標記（如TD、p等等）畫邊框，它可以定義邊框線的類型、寬度和顏色，利用這個特性，可以製作一些特殊效果。下面把透過實例來說明其應用技巧。

1、在文字加上邊框

上面的範例中，給一段文字加了不同的邊框，只是為了說明邊框線的顏色、粗細是可變的。
第一個邊框的CSS程式碼是： style="max-width:90%";
「border」後面的三個參數的意義是：邊框線的寬度是：thin（細線）；邊框線的類型：solid（實線）；邊框線的顏色：red（紅色）。
邊框線的寬度有三個標準值：thin（細線）、medium（中粗線）和thick（粗線），
此外，也可以自訂寬度，如：1pt、5px、2cm等。
邊框線的類型有九個確定值：none（無邊框線）、 dotted（由點組成的虛線）、 dashed（由短線組成的虛線）、 solid（實線）、 double（雙線，雙線寬度加上它們之間的空白部分的寬度就等於border-width定義的寬度）、 groove（3D溝槽狀的邊框）、 ridge（3D脊狀的邊框）、 inset（3D內嵌邊框，顏色較深）、 outset（3D外嵌邊框，顏色較淺），
注意：如果系統不支援這些邊框的屬性值，那麼“dotted”、“dashed”、“double”、“groove”、“ridge” 、「inset」和「outset」都會被「solid」取代。
邊框線的顏色：可以用十六進位的顏色代碼，如#00ffcc。
從上面可以看出，給文字加邊框確實很簡單，上例中後面那幾個邊框的設置，我不講你也明白了吧！這裡告訴你一點小技巧，給一段文字加邊框，可把CSS加在〈P〉標記裡；給幾段文字加邊框，先把那幾段文字用p標記括起來，再把CSS加在〈 p〉標記裡；若是要為一行文字加上幾個不同的邊框，則需要把文字放在表格裡，再把CSS分別加到〈TD〉標記裡。
2、為導覽選單加分隔線

上面這個範例中的小白線，當然可以用圖象來做，但我在這裡是用CSS的「border」的擴充屬性畫了邊框的一條邊，這樣程式碼要少的多。畫邊框的單邊與上例的邊框的四條邊類似，一個邊框的四條邊的屬性如下：
邊框線名稱：border-top（上邊框線）、border-right（右邊框線）、border -bottom（下邊框線）和boder-left（左邊框線）；每條邊框線的類型、寬度和顏色的值與「boder」屬性相同。如本例要定義每個儲存格的左邊框線為白色線，線的寬度為「1px」的實線，則CSS程式碼是這樣的：

  style="max-width:90%"。

在單獨定義邊框線時，若不給出某個值，那麼就取其預設的初始值。在dreamweaver中定義CSS非常方便，不用寫程式碼；把常用的邊框線一次定義好，放在外連式CSS檔案中，要用時呼叫一下就行了，非常方便。
3、在一個邊框中採用不同寬度和顏色的邊框線
在本例中的效果，當然可以用上例中的方法來實現，但那樣代碼過多，可採用另一種合併的方法，把四條邊的屬性值分類放在一起，如本例的程式碼是這樣的：

style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。

从上面可以看出，我把边框线的类型、宽度和颜色归类在一起定义了，这里请注意几点：
一、四条边框线的位置顺序是：上边框线、右边框线、下边框线、左边框线；
二、我在本例中边框线的类型只取了一种实线类型，实际上四条边也可以分别定义不同的类型；
三、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值，则其余三个自动取相同值，如：border-style:solid与border-style:solid solid solid solid的效果完全一样；如果仅给出两个或三个值，那么缺失边的属性值把取与对边相同的值。如：boder-width:thin thick与border-width:thin thick thin thick效果相同，border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。
Border属性的灵活应用，可以产生许多特殊效果，方法与上面介绍的相同。
例子：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>一列固定宽度——</title> 
<style type="text/css"> 
<!-- 
#layout { 
border: 2px solid #A9C9E2; 
background-color: #E8F5FE; 
height: 200px; 
width: 300px; 
} 
--> 
</style> 
</head> 
<body> 
<p id="layout">hfhfg</p> 
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

css鼠标样式cursor的讲解

css中border属性之制作网页虚线

以上是CSS Border屬性之solid的使用介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

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

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

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

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

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

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

如何使用CSS实现元素的边框动画效果Nov 21, 2023 pm 02:26 PM

如何使用CSS实现元素的边框动画效果导语：在网页设计中，为了增加用户的视觉体验和页面的吸引力，常常会使用一些动画效果来使页面元素更加生动和有趣。其中，边框动画是一种很常见的效果，它可以使元素边框呈现出变化、闪烁或者流动的动态效果。本文将介绍如何使用CSS来实现元素的边框动画效果，并提供具体的代码示例。一、实现边框颜色变化动画要实现边框颜色变化的动画效果，可以

CSS属性实现渐变边框效果的技巧Nov 18, 2023 pm 02:53 PM

CSS属性实现渐变边框效果的技巧，需要具体代码示例在网页设计中，边框是一个重要的元素，能够为页面带来更加丰富的视觉效果。而如果能够在边框上实现渐变效果，将进一步增加页面的吸引力。本文将介绍一些使用CSS属性实现渐变边框效果的技巧，并提供具体的代码示例。使用"border-image"属性实现渐变边框<style>.gradient-

PHP和GD库教程：如何给图片添加边框效果Jul 12, 2023 pm 02:16 PM

PHP和GD库教程：如何给图片添加边框效果引言：在web开发中，经常需要对图片进行处理，其中一种常见的需求是给图片添加边框效果。使用PHP结合GD库提供的丰富功能，可以很便捷地实现这个需求。本文将详细介绍如何使用PHP和GD库给图片添加边框效果，并附上代码示例。一、GD库简介：GD库是PHP中用于处理图像的一个扩展库，提供了一系列处理图像的函数和方法。GD库

如何使用PHP为图片添加边框Aug 26, 2023 am 10:12 AM

如何使用PHP为图片添加边框在网页开发和图像处理中，经常需要为图片添加边框，以提升图片的美观度和可视性。本文将介绍如何使用PHP为图片添加边框的方法，并附有代码示例。首先，我们需要确保服务器上已安装了PHP的GD库。GD库是一个用于处理图像的开源库，可以用于创建、操作和输出图像。大多数服务器默认已经安装了GD库，但如果没有安装，可以通过PHP的扩展程序管理工

如何移除HTML文本框的边框Feb 19, 2024 am 10:11 AM

标题：HTML文本框去掉边框的具体代码示例在HTML中，文本框是一种常见的表单元素，常用于用户输入文本或数据。默认情况下，文本框会显示一个边框，但有时我们可能需要将其边框去掉，以满足网页设计的需求。本文将介绍如何通过具体的代码示例去掉HTML文本框的边框。在HTML中，创建文本框需要使用标签，并设置type属性为"text"。为了去

See all articles