CSS3圓角、盒陰影與邊框圖片的具體詳解

今天開始整理CSS3的知識

其實應該是昨晚寫的，不過好像是急性腸胃炎了，痛的一晚上沒睡著，藍瘦香菇
還好今天打點滴睡一覺就好了，看來這吃東西還是注意點好，被我的胃腸報複了
CSS沒什麼難的，不過看的同時自己要在瀏覽器上試一試，試一遍就記住了
光看不做白看

CSS3各個瀏覽器是存在相容問題的
不同瀏覽器有不同首碼的私人屬性，表示屬性或規則還沒有成為標準
換句話說，官方還沒公布標準的時候，各個瀏覽器已經偷摸實現了
但是真正標準未來不一定是什麼樣子，怎麼辦，那就加首碼吧
雖然現在新版本瀏覽器不用加首碼，但保證相容還是要寫

瀏覽器	首碼
chrome/safari	-webkit
firefox	-moz
IE	-ms
opear	-o

border-radius圓角

radius這個單詞是半徑的意思
CSS3之前要想實現這種效果，最好的辦法恐怕只能利用Photoshop了
通過這個屬性可以給我們的元素加“圓角”
比如我們把一個元素變成圓

<p class="demo"></p>

.demo {    width: 100px;    height: 100px;    background-color: gold;    border-radius: 50%;}

為什麼值是border-radius屬性值是50%就變成了一個圓呢？
憑我們對CSS的理解它一定是一個複合屬性它等價border-radius: 50% 50% 50% 50%;
border-radius可以拆分為

• border-top-left-radius：邊框左上方的弧度

• border-top-rigtht-radius：邊框右上方的弧度

• border-bottom-left-radius：邊框左下角的弧度

• border-bottom-rigtht-radius：邊框右下角的弧度

所以它和下面的代碼等價，但是我們不要寫這麼麻煩的

.demo {    width: 100px;    height: 100px;    background-color: gold;    border-top-left-radius: 50%;    border-top-right-radius: 50%;    border-bottom-left-radius: 50%;    border-bottom-right-radius: 50%;}

就拿這個border-top-left-radius: 50%來說

實際上它相當於在元素盒的坐上畫一個矩形，矩形的寬高就是元素的一半（50%）
並且以靠近元素內部的點為圓心畫弧
於是四個屬性合在一起，就成了一個圓

這個屬性還可以更複雜
下面的代碼是等價的

.demo {    width: 100px;    height: 100px;    background-color: gold;    border-top-left-radius: 10px 20px;    border-top-right-radius: 20px 30px;    border-bottom-right-radius: 30px 40px;    border-bottom-left-radius: 40px 50px;}

.demo {    width: 100px;    height: 100px;    background-color: gold;    border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;}

注意順序是順時針：左上、右上、右下、左下
這樣喪心病狂的寫法還真的不常見
子屬性看起來是複合屬性border-top-left-radius: 10px 20px;
但其實不是，好奇的我嘗試了一下發現並沒有border-top-left-radius-x這個屬性
第一個數字表示矩形x軸方向的距離，第二個數字表示矩形y軸方向的距離，
不要讓前面的top-left誤導你
css中所有類似屬性的都是x軸在前，y軸在後
比如background-position複合屬性就是background-position-x在前，background-position-y在後

通過這個好玩的屬性，我們可以做半圓

.demo {    width: 200px;    height: 100px;    background-color: orangered;    border-radius: 100px 100px 0 0 / 100px 100px 0 0;}

做一個葉子

.demo {    width: 200px;    height: 100px;    background-color: greenyellow;    border-radius: 200px 0 200px 0 / 100px 0 100px 0;}

和我們的padding、margin等複合屬性類似

寫1個值 border-radius: 10px –> ///
寫2個值 border-radius: 10px 20px –> /，/
寫3個值 border-radius: 10px 20px 30px –> ，/，
寫4個值 border-radius: 10px 20px 30px 40px –> ，，，

相信大家懂我的意思

box-shadow盒陰影

我給上面我們寫的葉子加一行代碼

.demo {    width: 200px;    height: 100px;    background-color: greenyellow;    border-radius: 200px 0 200px 0 / 100px 0 100px 0;    box-shadow: 10px 20px;}

產生了影子的效果，屬性值就是x軸的位移量和y軸的位移量
此外還有一些可選的屬性值：陰影模糊半徑、陰影擴充半徑、陰影顏色、投影方式
同時一個盒子可以擁有多個陰影，用逗號隔開就好了

.demo {    width: 200px;    height: 100px;    background-color: greenyellow;    border-radius: 200px 0 200px 0 / 100px 0 100px 0;    box-shadow: 20px 20px 5px 5px green,                40px 40px 5px 5px;}

至於投影方式預設是外投影，我們可以設定屬性值inset變成內投影
比如做一個月食的效果

.demo {    width: 200px;    height: 200px;    background-color: black;    border-radius: 50%;    box-shadow: 40px 40px 0 0 yellow inset;}

border-image邊框圖片

首先我需要一張作為邊框圖片的資源

我拿的這張圖片的大小是81px*81px
border-image也是一個複合屬性，子屬性有這些

• border-image-source：映像來源路徑

• border-image-slice：指定映像的邊界向內位移

• border-image-repeat：邊框映像的平鋪方式

• border-image-width ：邊框寬度
  （border-image-outset用不上不講了）

.demo {    width: 54px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png');}

唯寫一個圖片資源樣子會很奇怪

我們先加上裁剪屬性值

.demo {    width: 54px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27;}

注意它沒有單位（預設px），也可以用百分比的形式
這裡的27表示對圖片四個方向（上右下左）都從外向裡裁剪27px變成一個九宮格

然後將四個角的圖片放到邊框的四個角
將剩下的部分（中間的扔掉）展開（預設）放到邊框餘下的位置
如果你想裁剪不同像素，可以分開寫

比如border-image: url('border.png') 10% 20% 30% 40%;
九宮格就會被劃成這樣

平鋪方式一下有幾種

• stretch 展開

• repeat 平鋪

• round 鋪滿（展開平鋪）

預設的就是stretch展開
現在我把盒子寬度變為200px，再來比較這三種方式的區別

.demo { /*①展開*/    width: 200px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27 stretch;}

展開就是把圖片自適應拉開

.demo { /*②平鋪*/    width: 200px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27 repeat;}

平鋪會把裁剪的圖片放到中間的位置，然後向兩邊重複

.demo { /*③鋪滿*/    width: 200px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27 round;}

鋪滿是展開和平鋪的結合，不會造成上面的切割效果（毫無違和感）
當然它會儘可能重複多個小方格

我們可以再調整邊框圖片的寬度
比如說我要調整為20px
在裁剪屬性值後加‘/’寫上要調整的寬度值

.demo {    width: 200px;    height: 54px;    border: 27px solid transparent;    border-image: url('border.png') 27/20px round;}

今天這個就不總結了，都在上面了