国产福利片一区二区,99热这里只有精品7,奇米777在线

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

本章給大家帶來css如何設置邊框樣式？邊框的不同樣式介紹（代碼實例）,有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一：border邊框線的基本樣式

邊框樣式屬性指定要顯示什么樣的邊界

1.border-style 屬性

none: 默認無邊框
dotted: 定義一個點線邊框
dashed: 定義一個虛線邊框
solid: 定義實線邊框
double: 定義兩個邊框。兩個邊框的寬度和 border-width 的值相同
groove: 定義3D溝槽邊框。效果取決于邊框的顏色值
ridge: 定義3D脊邊框。效果取決于邊框的顏色值
inset:定義一個3D的嵌入邊框。效果取決于邊框的顏色值
outset: 定義一個3D突出邊框。效果取決于邊框的顏色值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>border-style屬性</title> 
<style>
	.demo{width: 500px;height: 500px;margin:50px auto;}
	p.none {border-style:none;}
	p.dotted {border-style:dotted;}
	p.dashed {border-style:dashed;}
	p.solid {border-style:solid;}
	p.double {border-style:double;}
	p.groove {border-style:groove;}
	p.ridge {border-style:ridge;}
	p.inset {border-style:inset;}
	p.outset {border-style:outset;}
	p.hidden {border-style:hidden;}
</style>
</head>

<body>
	<div class="demo">
		<p class="none">無邊框。</p>
		<p class="dotted">虛線邊框。</p>
		<p class="dashed">虛線邊框。</p>
		<p class="solid">實線邊框。</p>
		<p class="double">雙邊框。</p>
		<p class="groove"> 凹槽邊框。</p>
		<p class="ridge">壟狀邊框。</p>
		<p class="inset">嵌入邊框。</p>
		<p class="outset">外凸邊框。</p>
		<p class="hidden">隱藏邊框。</p>
	</div>
</body>

效果圖：

上例是同時設置上、下、左、右四面的邊框，也可以單獨設置一面的邊框：border-top-style(上邊框)，border-bottom-style(下邊框)，border-left-style(左邊框)，border-right-style(右邊框).

2.border-width 屬性

設置邊框寬度，為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個關鍵字之一，它們分別是 thick 、medium（默認值）和 thin。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>border-width 屬性</title>
		<style>
			.demo {
				width: 500px;
				height: 500px;
				margin: 50px auto;
			}
			
			.one {
				border-style: solid;
				border-width: 5px;
			}
			
			.two {
				border-style: solid;
				border-width: medium;
			}
			
			.three {
				border-style: solid;
				border-width: 1px;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p class="one">一些文本。</p>
			<p class="two">一些文本。</p>
			<p class="three">一些文本。</p>
		</div>
	</body>

效果圖：

注意: "border-width" 屬性如果單獨使用則不起作用。要先使用 "border-style" 屬性來設置邊框。

3.border-color 屬性

設置邊框的顏色。可以設置的顏色：
name - 指定顏色的名稱，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16進制值, 如 "#ff0000"

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>border-color 屬性</title>
		<style>
			.demo {
				width: 500px;
				height: 500px;
				margin: 50px auto;
			}
			
			.one {
				border-style:solid;
	            border-color:red;
			}
			
			.two {
				border-style: solid;
				border-color:rgb(80,189,114);
			}
			
			.three {
				border-style: solid;
				border-color: #0188FB;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<p class="one">顏色1</p>
			<p class="two">顏色2</p>
			<p class="three">顏色3</p>
		</div>
	</body>

效果圖：

注意: "border-color" 屬性如果單獨使用則不起作用. 要先使用 "border-style" 屬性來設置邊框。

4.邊框-簡寫屬性

上面是分別設置邊框的不同屬性，也可以同時設置邊框的不同屬性，例：

border:5px solid red;

二：邊框圓角

border-radius：邊框四邊同時設置圓角
border-top-left-radius：設置邊框的左上角圓角
border-top-right-radius：設置邊框的右上角圓角
border-bottom-left-radlius：設置邊框的左下角圓角
border-bottom-right-radius：設置邊框的右下角圓角

顧名思義，就是可以在設置邊框的基本屬性后，在給邊框添加圓角效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>邊框圓角 </title>
		<style>
			.demo {
				width: 800px;
				height: 500px;
				margin: 50px auto;
			}
			.demo *{
				width: 100px;
				height: 100px;
				margin: 20px 10px;
				border: 3px solid #21B4BB;
				float: left;
			}
			.demo1 {
	            border-radius:10px;
			}
			
			.demo2 {
				border-top-left-radius:10px;
			}
			
			.demo3 {
				border-top-right-radius:10px;
			}
			.demo4 {
				border-bottom-left-radius :10px;
			}
			.demo5 {
				border-bottom-right-radius:10px;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<div class="demo1">四邊同時設置圓角</div>
			<div class="demo2">左上角設置圓角</div>
			<div class="demo3">右上角設置圓角</div>
			<div class="demo4">左下角設置圓角</div>
			<div class="demo5">右下角時設置圓角</div>
		</div>
	</body>

效果圖：

三：邊框陰影（box-shadow）

h-shadow : 水平陰影距離
v-shadow : 垂直陰影距離
blur : 可選，模糊距離
spread : 可選，陰影的尺寸
color : 可選，顏色
inset : 可選值,將當前陰影修改為內陰影

語法規范：box-shadow:h-shadow v-shadow blur spread color inset；
也可簡寫為：box-shadow:h-shadow v-shadow blur color；

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>邊框陰影</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				border: 1px solid #2DC4CB;
				box-shadow:5px 5px #ccc;
			}
			
		</style>
	</head>

	<body>
		<div class="demo">
			hello
		</div>
	</body>

效果圖：

設置邊框陰影效果，可以讓盒子（容器）變得更加立體，帶來更好的視覺效果。

以上就是css如何設置邊框樣式？邊框的不同樣式介紹（代碼實例）的詳細內容，更多請關注php中文網其它相關文章！

網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

css如何設置邊框樣式？邊框的不同樣式介紹（代碼案例）

本類教程下載

系統下載排行