以下為本站文章分類清單

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

 

以下為文章回應區

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

Where is the Achilles heel?   2017/8/21 下午 06:31:00

Good info. Lucky me I came across your blog by accident (stumbleupon).
I've saved it for later!

alessandragrahm.weebly.com   2017/8/13 上午 03:48:00

An impressive share! I have just forwarded this onto a friend who had been doing a little homework on this.
And he in fact ordered me lunch due to the fact that I found it for him...

lol. So allow me to reword this.... Thank YOU for the meal!!
But yeah, thanx for spending the time to talk about this matter here on your internet site.

What do you do when your Achilles tendon hurts?   2017/7/31 下午 12:44:00

It's a pity you don't have a donate button! I'd definitely donate to this superb
blog! I guess for now i'll settle for book-marking
and adding your RSS feed to my Google account.
I look forward to brand new updates and will share this site with my Facebook group.

Chat soon!

paigedenn.hatenablog.com   2017/7/31 上午 03:02:00

It's very simple to find out any matter on web as compared to textbooks, as I found this article at
this site.

low vitamin d foot pain   2017/7/3 上午 09:41:00

Hi my loved one! I wish to say that this post is awesome, nice written and
include approximately all vital infos. I would like to
look extra posts like this.

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.

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