CSS主題製作工具

這個工具是為那些想要為自己頁面更改主題的人而設的。您想要試試嗎?那就讓我們立即開始吧!

回到目錄

選擇你想要使用的顏色。

回到目錄

將頁面版頭標題從「SCP基金會」改變

回到目錄

將頁面版頭副標題從「控制,收容,保護」改變

回到目錄

將頁面版頭標誌從 改變

回到目錄

將頁面版頭背景從 改變

回到目錄

改變連結顏色

回到目錄

改變字體顏色

回到目錄

改變標準背景顏色

回到目錄

改變內容標題顏色

回到目錄

改變標準字體

回到目錄

改變內容標題的字體

回到目錄

改變側邊欄顏色

回到目錄

改變側邊欄標題顏色

回到目錄

改變移動端側邊欄按鈕顏色

回到目錄

改變 tab 背景顏色

回到目錄

改變 tab 選擇器顏色

回到目錄

改變跨維基板塊顏色

回到目錄

改變評分模組顏色

text-shadow 文字陰影

<offset-x>, <offset-y>: 必選。這些長度值指定陰影相對文字的偏移量。<offset-x> 指定水準偏移量,若是負值則陰影位於文字左邊。 <offset-y> 指定垂直偏移量,若是負值則陰影位於文字上面。如果兩者均為0,則陰影位於文字正後方(如果設置了<blur-radius> (模糊半徑)則會產生模糊效果)。

<length>(長度)

<blur-radius>: 可選。這是 <length> 長度值。如果沒有指定,則默認為0。值越大,模糊半徑越大,陰影也就越大越淡(wider and lighter)。

<length>(長度)

<color>: 可選。可以在偏移量之前或之後指定。如果沒有指定顏色,則使用UA(使用者代理)自行選擇的顏色。因此如果想確保跨流覽器的一致性,請明確地指定一種顏色。

<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

/* offset-x | offset-y | blur-radius | color */

text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */

text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */

text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */

text-shadow: white 2px 5px;

/* offset-x | offset-y*/
/* color(顏色)和 blur-radius(模糊半徑)使用預設值。 */

text-shadow: 5px 10px;

box-shadow 邊框陰影

其與「text-shadow」文字陰影類似,但可以選擇<inset>。

---

<inset>: 不使用inset,預設陰影在邊框外,即陰影向外擴散。

使用 inset 後,陰影在邊框內(即使是透明邊框),即陰影向內擴散,背景之上內容之下。

inset

/* offset-x | offset-y | color */

box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */

box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius(陰影擴散半徑) | color */

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */

box-shadow: inset 5em 1em gold;

/* 指定多個陰影時,以逗號將陰影隔開。 */

box-shadow: 3px 3px red, -1em 0 0.4em olive;

border

<width>: 設置盒子模型的邊框寬度。如果這個值沒有被設置,它的預設值是medium。

<length> | thin(薄) | medium(中等) | thick(厚)

<style>: 設定元素所有邊框的樣式。如果這個值沒有被設置,它的預設值是none。

none(無) | hidden(隱藏) | dotted(點線) | dashed(虛線) | solid(實線) | double(雙線) | groove(雕刻效果) | ridge(浮雕效果) | inset(陷入效果) | outset(突出效果)

<color>: 可以確定border的顏色。如果這個值沒有設置,它的預設值是元素的使用中色彩屬性值(是文字顏色而非背景色)。

<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

/* style */

border: solid;

/* width | style */

border: 2px dotted;

/* style | color */

border: outset #f33;

/* width | style | color */

border: medium dashed green;

[フレーム]

a

備註1: 使用上面的工具只能計算出大概數值。
備註2: 如果側邊欄 side-block 的顏色並非單色 (#ffffff, #DCDCDC 等等),那麼這個方法的效果並不會如同「第三定律版式」(#E2E4E7)那樣好。
備註3: 色調偏移度(-70deg) = 色調偏移度(290deg)

基本的例子

例外

a