집 > 기사 > 웹 프론트엔드 > 견고한 CSS 테두리 속성 사용 소개

견고한 CSS 테두리 속성 사용 소개

不言원래의: 2018-06-12 11:11:4510882검색

이 글에서는 CSS Border 속성 solid의 사용에 대해 소개합니다. 이제 필요한 친구들이 CSS의 속성을 참조하여 그릴 수 있습니다. 범위(예: TD, p 등)를 결정할 수 있는 HTML 태그의 테두리, 텍스트에 테두리를 추가하고 탐색 메뉴에 구분선을 추가할 수 있습니다. 관심 있는 친구들이 이에 대해 배울 수 있도록 아래에서 예시를 공유하겠습니다.

Produced by 웹상의 모든 사람들은 선 그리기에 대해 고민한 경험이 있을 것입니다. 먼저 "테두리"에 대해 알아봅시다. CSS의 속성으로 TD, p 등의 태그를 지정할 수 있습니다. ) 범위를 결정할 수 있습니다. 테두리 선의 유형, 너비 및 색상을 정의할 수 있는 테두리를 그립니다. 이 기능을 사용하면 몇 가지 특수 효과를 만들 수 있습니다. 다음은 예제를 통해 응용 기술을 설명합니다.

1. 텍스트에 테두리 추가
위의 예에서는 테두리 선의 색상과 두께가 가변적임을 보여주기 위해 텍스트에 다양한 테두리가 추가되었습니다.
첫 번째 테두리의 CSS 코드는 다음과 같습니다. style="max-width:90%";
"테두리" 뒤의 세 매개변수의 의미는 다음과 같습니다. 테두리 선의 너비는 다음과 같습니다. 경계선: 실선(실선); 경계선 색상: 빨간색(빨간색).
테두리 선의 너비에는 얇은(가는 선), 중간(중간 두꺼운 선), 두꺼운(굵은 선)의 세 가지 표준 값이 있습니다.
또한 너비도 1pt, 5px, 2cm로 맞춤 설정할 수 있습니다. , 등.
경계선의 종류에는 없음(경계선 없음), 점선(점으로 구성된 점선), 점선(짧은 선으로 구성된 점선), 실선(실선), 이중(이중선, 이중선)의 9가지 명확한 값이 있습니다. width) 게다가 그 사이의 빈 부분의 너비는 border-width로 정의된 너비와 같습니다), 홈(3D 홈 모양 테두리), 릿지(3D 릿지 모양 테두리), 인셋(3D 인라인 테두리, 더 어두운 색상) , outset(3D 인라인 테두리, 밝은 색상),
참고: 시스템이 이러한 테두리의 속성 값을 지원하지 않는 경우 "점선", "점선", "이중", "홈", "능선"이 표시됩니다. ", "inset" 및 "outset"은 "solid"로 대체됩니다.
테두리선 색상: #00ffcc와 같은 16진수 색상 코드를 사용할 수 있습니다.
위에서 볼 수 있듯이 텍스트에 테두리를 추가하는 것은 실제로 매우 간단합니다. 설명하지 않아도 위 예에서 다음 테두리 설정을 이해할 수 있습니다! 텍스트에 테두리를 추가하려면 CSS를

태그에 추가하면 됩니다. 여러 텍스트에 테두리를 추가하려면 먼저 해당 텍스트 조각을 p 태그로 묶으세요. 그런 다음 CSS를

태그에 추가합니다. 텍스트 줄에 여러 가지 다른 테두리를 추가하려면 테이블에 텍스트를 배치한 다음 CSS를

태그에 각각 추가해야 합니다.

2. 탐색 메뉴에 구분선 추가

위 예제의 작은 흰색 선은 물론 이미지로도 가능하지만 여기서는 CSS "border" 확장 속성을 사용하여 테두리를 그렸습니다. 그런데 이 코드는 훨씬 적습니다. 테두리의 한 변은 위 예의 테두리의 네 변과 유사합니다. 테두리의 네 변의 속성은 다음과 같습니다.
테두리 선 이름: border-top(상단 테두리 선), border-right (오른쪽 경계선), border-bottom (하단 경계선) 및 border-left (왼쪽 경계선) 각 경계선의 유형, 너비 및 색상은 "boder" 속성과 동일합니다. 예를 들어, 이 예에서는 각 셀의 왼쪽 경계선을 흰색 선으로 정의하고 선의 너비를 "1px"의 실선으로 정의하려고 합니다. CSS 코드는 다음과 같습니다.

style="border-left: 1px solid #ffffff"。

경계선을 별도로 지정하고 특정 값이 제공되지 않으면 기본 초기 값을 사용합니다. 코드를 작성하지 않고도 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 테두리 속성 사용 소개

관련 기사