以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

用 CSS 製作圖形

2/18 12' icon

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:<水平距離> <垂直距離> <模糊程度> <陰影顏色>;

距離正值,代表向右、向下;負值代表向左向上。

box-shadow:6px 20px 6px #000;
box-shadow:-6px -6px 6px #000;
box-shadow:0px 0px 16px #000;
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;
	}

 

以下為文章回應區

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

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