首頁    文章清單    RSS

用 CSS 製作圖形

2/18 12'

CSS 邊框(border)的應用很廣，基本語法包括

border-color:a b c d;
border-style:a b c d;
border-width:a b c d;

看起來可能是

三角形

當拿起放大鏡，看看邊框的表現，可能變成

border-left:#000 30px solid;
border-top:#000 30px solid;

把邊框換個顏色再來看看

border-left:#F00 30px solid;
border-top:#00F 30px solid;

也就是說，邊框交接處，是以斜角方式處理，而邊框是附加在區塊之外，把框線加粗，看起來可能是

border-style:solid;
border-color:#F00 #0F0 #00F #FF0;
border-width:30px;
width:20px;
height:20px;

如果區塊的寬度和高度都是 0

border-style:solid;
border-color:#F00 #0F0 #00F #FF0;
border-width:30px;
width:0px;
height:0px;

而邊框除了粗細和顏色，還有樣式變化，樣式有

solid	dotted	dashed	double	groove	ridge	inset	outset

none	: 無
hidden	: 基本上和 none 同，除了用在表格時
dotted	: 點狀線
dashed	: 虛線
solid 	: 實心線
double	: 雙線 (粗細至於 3px)
groove	: 槽狀
ridge	: 立體陰影
inset	: 內凹
outset	: 外凸

而邊框顏色，除了指定色碼，還有一項 transparent，代表透明(有組細、沒顏色)，以下，將上部邊框處理為透明(紅色消失)

所以，透過適當的透色邊框，可以處理出多種角度的三角形

圓形 border-radius

CSS3 中的 border-radius 指定邊框四個角變成圓弧，數值代表弧半徑，如(下例區塊大小 200x200，格點 20x20，border-radius 由外至內，20px 40px 60px 80px)

只要 border-radius 值大於區塊一半，正方形區塊就會變成正圓形

background-color:#F00;
border-radius:10px;
width:20px;
height:20px;

border:#F00 10px dotted;
border-radius:10px;
width:10px;
height:10px;

把前述邊框樣式套進去，再變化 width/height 等，就能再創造更多變化

陰影 box-shadow

陰影的語法為

box-shadow:<水平距離> <垂直距離> <模糊程度> <陰影顏色>;

距離正值，代表向右、向下；負值代表向左向上。

background-color:#F00;
border-radius:10px;
width:20px;
height:20px;
box-shadow:0 2px 3px #000;

background-color:#F00;
border-radius:10px;
width:20px;
height:20px;
box-shadow:0 2px 3px #000 inset;

border-radius:10px 10px 10px 10px;
box-shadow:0px 0px 2px #000;
background:transparent;
height:18px;
width:18px;
border:#F00 3px solid;

實際應用

<span class="bullet bullet-red">
<span class="bullet bullet-blue">
<span class="bullet bullet-green">
<span class="bullet bullet-black">

<span class="ring ring-red">
<span class="ring ring-blue">
<span class="ring ring-green">
<span class="ring ring-black">
<span class="arrow">


<style type="text/css">
span.d
	{
	display:inline-block;
	font-size:0px;
	border-color:transparent transparent transparent #F00;
	border-style:solid;
	border-width:5px 0px 5px 5px;
	}

.bullet
	{
	border-radius:10px 10px 10px 10px;
	box-shadow:0 2px 3px #000 inset;
	display:inline-block;
	height:10px;
	width:10px;
	}

.bullet-red	{background-color:#F00;}
.bullet-blue	{background-color:#00F;}
.bullet-green	{background-color:#0F0;}
.bullet-black	{background-color:#666;}

.ring
	{
	border-radius:10px 10px 10px 10px;
	box-shadow:0px 0px 2px #000;
	display:inline-block;
	background:transparent;
	height:8px;
	width:8px;
	}

.ring-red	{border:#F00 1px solid;}
.ring-blue	{border:#00F 1px solid;}
.ring-green	{border:#0F0 1px solid;}
.ring-black	{border:#666 1px solid;}

.arrow
	{
	border-radius:10px 10px 10px 10px;
	display:inline-block;
	font-size:0px;
	border-color:transparent transparent transparent #F00;
	border-style:solid;
	border-width:5px 0px 5px 5px;
	}

 

以下為文章回應區

同意轉載，不過麻煩看一下轉載需知

給個回應

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: