.widget{ padding:10px; border:1px solid #BADA55; background-color:#C0FFEE; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .widget-heading{ font-size:1.5rem; line-height:1; font-weight:bold; color:#BADA55; margin-right:-10px; margin-left: -10px; padding:...
--border-width Border width of the button --box-shadow Box shadow of the button --color Text color of the button --color-activated Text color of the button when pressed --color-focused Text color of the button when focused with the tab key --color-hover Text color of the button when...
resize:none | both | horizontal | vertical | inherit box-sizing: content-box | border-box | inherit outline:outline-color outline-style outline-width outine-offset resize屬性指定一個元素是否應該由使用者去調整大小。 box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。 outline-offset 屬性...
但如果你希望讓這個動畫,可以像是一個進度條一樣,慢慢的轉變為長方形,而不是前面看到的瞬間轉變,你可以使用transition屬性來操控,transition幫你在網頁上製造兩個狀態之間切換的轉場效果。 Transition從3個面向來調整動畫 transition這個屬性可以從3個面向來調整動畫: 時間長度(duration) 調整個動畫的撥放時間長度。 ...
用CSS 設計出三角形圖案會用到的就是元素邊框(border)的設計概念,一個元素會有四個邊框,每個邊框之間是呈現 45 度夾角,像下方呈現的這樣子。 我們利用這個特性,讓其中一個邊的邊框消失,對稱的兩邊設為相同的顏色,剩下的一個邊設為要顯示的顏色與長度就會顯示我們要的三角形了,以下的實際操作範例可以看得更清楚...
border-top:2px solid #336699; border-bottom:2px solid #336699; width:100%; position:fixed; /*固定位置定位*/ top:0; /*距離上方 0 像素*/ z-index:1; /*重疊時會在其他元素之上*/ } 加上position:fixed 便能讓這個元素固定位置,不會隨著頁面一起捲動,這是標準的 CSS 裡面就有的功能。而我們...
接下來我們調整一下 article 這一欄的寬度,為第三欄騰出空間 #wrapper{width:960px;margin:0auto;border:1pxsolid;overflow:hidden; }nav{width:150px;float:left;background:#dcd9c0; }article{width:600px;float:left;background:#ffed53; }aside{width:210px;float:left;background:#3f7ccf; ...
/* reset */*{margin:0;padding:0;box-sizing:border-box;}/* main contents */navul{display:flex;list-style:none;}navulli{width:100%;}nava{display:block;height:100%;padding:10px5px;background-color:#d2691e;color:#ffffff;text-align:center;border-width:10px;border-color:#ff964b#b44b...
{ display: none; } ul.thumbnails li span.image-overlay { display:block; position: absolute; top: 0; left: 0; line-height: normal; width: 515px; padding: 5px; } ul.thumbnails li { background: #f3f6f7; border-color: #dbe2e5; border-radius: 7px; box-shadow: 0px 0px 20px 5...
1 3 內容 1 內容 2 最外面的 table 寬度 100% ,裡面的 table 有一個 maxwidth:600px,相對於外面的 table 居中。這樣在 PC 上最大寬度就為 600px,而在手機客戶端上寬度就為 100%。 但是有些客戶端如比較老的 outlook 無法識別 max-width 的屬性, 導致...