以下為本站文章分類清單

  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;
	}

 

以下為文章回應區

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

foot pain identifier   2017/6/21 下午 06:34:00

You can definitely see your skills in the work you write.
The arena hopes for more passionate writers such as you who are
not afraid to say how they believe. Always follow your heart.

tanpsychology1175.wordpress.com   2017/5/21 上午 11:17:00

What's up it's me, I am also visiting this web page regularly,
this website is in fact nice and the people are really sharing good thoughts.

manicure   2017/5/4 上午 04:12:00

I think the admin of this website is actually working hard in support of his web
site, as here every stuff is quality based material.

manicure   2017/4/11 下午 06:14:00

I have been surfing online more than 4 hours today, yet
I never found any interesting article like yours.
It is pretty worth enough for me. In my view, if all webmasters and bloggers made good content as you did, the internet will be much more useful than ever before.

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