自從css可以設定外框圓角border-radius之後，網頁上物件又可以有更多的變化，這一篇要介紹在多層物件的最外層設定圓角後，怎麼讓內層的物件都隨著有圓角。
閱讀全文 css讓內層圖片符合外框圓角 | Forcing child to obey parent's border-radius in CSS
標籤彙整: html5
css padding (內距)、margin (外距)、border (邊框) 四邊向屬性值 (CSS padding, margin, border four direction values)
CSS需要寫四個邊向數位的屬性常用的有三個，padding (內距)、margin (外距)、border (邊框)，寫四邊向數值的時候可以用不同的方式來寫，可以更快更好~
屬性加方向：
最簡單的寫法就是在這三個屬性的後面加上方向就可以，這是用在單純想指定某一邊向數值的時候。
padding-top: 5px; (上內距)
padding-bottom: 5px; (下內距)
padding-left: 5px; (左內距)
padding-right: 5px; (右內距)
margin-top: 5px; (上外距)
margin-bottom: 5px; (下外距)
margin-left: 5px; (左外距)
margin-right: 5px; (右外距)
border-top: 5px; (上邊框)
border-bottom: 5px; (下邊框)
border-left: 5px; (左邊框)
border-right: 5px; (右邊框)
閱讀全文 css padding (內距)、margin (外距)、border (邊框) 四邊向屬性值 (CSS padding, margin, border four direction values)
去除網頁預設邊框
瀏覽器預設網頁會保留邊框，大概是4px左右，但在設計滿版網頁的時候卻常常會造成視覺不連續，其實只要在css設定一下就可以了~
閱讀全文 去除網頁預設邊框
RWD網頁切版(一){HTML5網頁框架}
CSS 選擇器、選取器（CSS Selector）
css的選取器越來越複雜，這篇來介紹一下各種選取器
- Class selectors（類別選擇器）
- ID selectors（ID選取器）
- Tag selectors（標籤選取器）
- Universal selector（通用選取器）
- Attribute selectors（屬性選取器）
- Descendant combinator（後代選取器）
- Child combinator（子選取器）
- Adjacent sibling combinator（同層相鄰選取器）
- General sibling combinator（同層全部選取器）
- Pseudo-classes（偽類別選取器）
- Pseudo-elements（偽元素選取器）
- Groups of selectors（群組選取器）
1~5是單一選取器，6~12是組合選取器。
閱讀全文 CSS 選擇器、選取器（CSS Selector）
css display:table left、right div不再長短腳 (pure CSS make float div same height)
在做float div的時候常常因為左右邊的內容不一樣多造成div不能一樣高，這篇提供一個解決方案，只要利用display屬性就可以達成左右一樣就的效果。
<preview>
閱讀全文 css display:table left、right div不再長短腳 (pure CSS make float div same height)
jQuery go to top 按鈕 (go to top button)
<html>
<div id=”top”>TOP</div>
<css>
#top{
position: fixed;
right: 50px;
bottom: 20px;
}
<script>
$(‘#top’).click(function () {
$(‘html,body’).animate({
‘scrollTop’ : ‘0px’
}, 1000);
});
CSS ol/ul li 建立章節目錄 (css ol/ul li decoration)
css li也可以製作有階層的章節目錄
閱讀全文 CSS ol/ul li 建立章節目錄 (css ol/ul li decoration)
CSS ol/ul li 遞減 (css ol/ul li reversed)
最近在做網頁時突然需要遞減排序編號的功能，在html5的架構下<ol>可以直接加reversed屬性，但如果是用<ul>標籤的話，以下也提供一個解決方案。
css方法
ul {
list-style-type: none;
counter-reset: item 142;
/*counter-reset: item(自定變數) 142(項目總數);*/
}
ul > li {
counter-increment: item -1;
}
ul > li:before {
content: counter(item);
}
html5方法
<ol reversed> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol>
CSS 正方形 寬 等於 高 height equals width
CSS製作正方形只要使用:before選取器就可以了
html
<div class="box"> <div class="content">內容文字Content Text</div> </div>