自從css可以設定外框圓角border-radius之後,網頁上物件又可以有更多的變化,這一篇要介紹在多層物件的最外層設定圓角後,怎麼讓內層的物件都隨著有圓角。
閱讀全文 css讓內層圖片符合外框圓角 | Forcing child to obey parent's border-radius in CSS
標籤彙整: css3
SublimeText3編輯器(二){LIVE_CODING:及時預覽編寫內容HTML+CSS3}
前一篇(SublimeText3編輯器(一){精簡強大的外掛管理})介紹過Sublime的外掛管理工具,但好用的外掛絕對不止這些,當然最重要的還是編寫完後要看到的效果,如果能夠及時預覽更新就太方便了,不用一直重新整理網頁,有雙螢幕的話也只需要開著另個視窗就可以知道現在寫的CODE有沒有問題;當然影響網頁視覺最主要的當然是HTML本體和CSS樣式表啦,所以這次會介紹兩個外掛LiveReload、LiveStyle來幫助我們加速開發!!
css border(邊框)屬性
border: 寬度 樣式 顏色;
border主要要設定的屬性就是寬度、樣式、顏色,如果是照上面一行的寫法就會是四邊向的邊框都一樣,當然也可以分開寫。
border-width (邊框寬度)
border-style (邊框樣式)
border-color (邊框顏色)
閱讀全文 css border(邊框)屬性
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製作手指點擊動態 – pure css click animation
純CSS製作掃光效果 – pure css light sweep
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)