:::

3-4 CSS3 新功能(僅參考,不上)

一、 CSS3圓角框設定

  1. 整體:border-radius: 5px;
  2. 上左:border-top-left-radius: 5px;
  3. 上右:border-top-right-radius: 5px;
  4. 下左:border-bottom-left-radius: 5px;
  5. 下右:border-bottom-right-radius: 5px;
  6. 基本上可以分開設定寬和高,亦可用%或各種css單位來顯示

二、 一個效果各自表述:前綴詞

  1. IE前綴詞:-ms-
  2. FireFox前綴詞:-moz-
  3. Opera前綴詞:-o-
  4. chrome或safari:-webkit-

三、 box-shadow盒子陰影

  1. box-shadow:none; 無陰影
  2. box-shadow: 水平偏移 垂直偏移 模糊值 延伸值 顏色 inset; (除了模糊值外,其餘皆可負值)

四、 border-image花邊設定 (花邊圖1花邊圖2

  1. 搭配border:20px solid transparent;使用
  2. border-image: 圖片來源 圖片切割範圍 背景圖片寬度 超界幅度 背景圖顯示方式
    • (1)  圖片來源:用 url(圖片位置)來載入圖片,如url(images/border.png)
    • (2)  圖片切割範圍:將圖片以九宮格方式切開,其切割的寬高,如:27 即上右下左切用27x27去切割。若 27 13 則是上下用27切割,左右用13切割
    • (3)  背景圖片寬度:預設為1,若是2表示用一張底圖放大成兩倍位置,由於同為數字,可能會和前面的切割範圍混淆,故加個 / 以區隔之。
    • (4)  超界幅度:圖片在外框上的位置,若0則是從外框內部開始套用,越大就越往外。
    • (5)  背景圖顯示方式:repeat(重複填滿)、stretch(拉長)、round(重複填滿並自動調整圖片,預設)

:::

搜尋

QR Code 區塊

https%3A%2F%2Ftad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D976

書籍目錄

展開 | 闔起

線上使用者

104人線上 (10人在瀏覽線上書籍)

會員: 0

訪客: 104

更多…