postion

background-postion我們常用于元素的定位，而且可以接收好幾個值：

1、接收一個值

這個值可以為百分比、數(shù)值或者關(guān)鍵字，另一個值一定是center

// 單個屬性值
background-postion: 33px;
background-postion: center;
background-postion: left;
background-postion: bottom;
background-postion: right;
background-postion: top;
background-postion: 30%;
background-postion: right;
background-postion: right;
//依次等價于
background-postion: 33px center;
background-postion: center center;
background-postion: left center;
background-postion: bottom center;
background-postion: right center;
background-postion: top center;
background-postion: 30% center;
background-postion: right center;
background-postion: right center;

2、接收兩個值

兩個值都是數(shù)值或者百分比值時，第一個值表示水平方向，另一個值表示垂直方向，如果我們把兩個值都是為? ?background-position: 0% 0%? ?，那么就等于這個寫法? ?background-position：left top? ?;

當兩個值都是關(guān)鍵字時，top和bottom表示垂直方向，left和right表示水平方向，所以我們寫成? ?background-position: top right? ?和? ?background-position: right top? ?效果是一樣的，但是我們不能寫成? ?background-position: right left? ?和? ?background-position: top bottom? ?,如果這樣寫，是無效的。

當兩個字一個是數(shù)值或百分比值另一個是關(guān)鍵字時，如果數(shù)值或百分比值是第一個值，則表示水平方向，第二個值表示垂直方向。如果數(shù)值或百分比值是第二個值，就表示垂直方向，那另一個值就表示水平方向，所以如果我們寫成? ?background-position: 44px left? ?是無效的。

3、接收3個值或4個值

數(shù)值和百分比值表示的是偏移量，第一個值一定是關(guān)鍵字，用來表示從哪個方向開始偏移的，如果是3個值，則缺少的偏移量為0,所以我們寫成? ?background-position: 44px left top? ?是無效的。

background-postion接收多個值在瀏覽器中已經(jīng)兼容，我們可以用background-position來代替calc()函數(shù)，從而去實現(xiàn)左方向或右方向的定位。

cursor

cursor中我們很少用到抓取和縮放效果，? ?cursor:zoom-out? ?用于放大，? ?cursor:zoom-in? ?用于縮小，如果想要在桌面上查看放大或者縮小，加入對應(yīng)的屬性就行。

? ?cursor: grabbing? ?在電腦頁面顯示的是一個握住的手形，? ?cursor: grab? ?在電腦頁面顯示的是一個張開的手形，在項目中使用我們可以加入前綴，防止不顯示的問題。

如果我們想要在IE中去使用，我們可以加入move屬性值。

// 用move屬性值來代替grab
.wrapper {
  cursor: move;
  cursor: grab;
}

opacity

opacity可以使元素透明或者半透明，屬性值范圍0-1之間，opcacity默認值是1，而且我們還可以利用opacity將偽元素進行顯示或者隱藏。

opacity計算規(guī)則

當我們給父元素和子元素同時設(shè)置了半透明效果，因為opacity屬性沒有繼承性，所以半透明效果會疊加在一起，比如我們給父元素和子元素都設(shè)置為opacity：0.4，則此時的透明度就是0.16，是兩個opacity的乘積。

// 父元素的透明度
opacity-father {
    opacity: 0.4
}
// 子元素的透明度
opacity-son {
    opacity: 0.4
}

opacity的邊界

因為opacity的范圍是0-1，如果我們設(shè)置的值不在這個范圍之內(nèi)，那么系統(tǒng)會按邊界值去顯示。

.wrapper {
    // 透明值設(shè)置為-11，但是系統(tǒng)會解析成0
    opacity：-11;
    // 透明值設(shè)置為88， 系統(tǒng)會解析成1
    opacity：88
}

其中RGBA和HSLA都具有opacity這種邊界值的特性。

border-radius

平時工作中，我們最常用到的就是像素和百分比去設(shè)置border-radius。

border-radius: 10px;
// 常用來設(shè)置圓形
border-radius: 50%;

border-radius是一種縮寫形式，而它的全寫是由四部分組成的：? ?border-top-left-radius? ?, ? ?border-top-right-radius? ?, ? ?border-bottom-right-radius? ?, ? ?border-bottom-left-radius? ?四部分組成。

當只有1個值時，這個值的效果會作用四個角：? ?border-radius: 5px? ?

當有2個值時，第一個值作用于左上角和右下角，第二個值作用于右上角和左下角: ? ?border-radius：6px 10%? ?

當有3個值時，第一個值作用于左上角，第二個值作用于右下角和左下角，第三個值作用于右下角: ? ?border-radius: 3px 5% 6px? ?

當有4個值時，第一個值作用于左上角，第二個值作用于右上角，第三個值作用于右下角，第四個值作用于左下角: ? ?border-radius: 6px 7% 8px 4px? ?

還有一些等價的縮寫形式：

border-top-left-radius: 5px;
// 等價于
border-radius: 5px 5px;

border-radius常用的一些知識： border-radius的圓角以外的區(qū)域無法響應(yīng)點擊事件。不支持負值。當我們給父元素設(shè)置了border-radius，子元素是直角效果，我們可以設(shè)置? ?overflow：hidden? ?使子元素在視覺上看起來是一個圓角。當我們將border-radius應(yīng)用于? ?display:table? ?或者? ?display: inline-table? ?上時，我們必須讓表格元素的border-collapse屬性值為separate，border-collapse的默認值是? ?separate? ?，如果border-collapse: collapse，不會顯示圓角效果。

我們還可以利用border-radius設(shè)置一些不規(guī)則的圓角效果:

.wrapper {
    border-radius: 69% 29% 29% 69% / 59% 39% 59% 39%;
}

一般帶圓弧的圖形效果都可以使用border-radius來實現(xiàn)出來，我們可以繪制角標：

border-bottom-right-radius: 100%;

到此這篇關(guān)于詳解CSS中postion和opacity及cursor的特性的文章就介紹到這了,更多相關(guān)CSS opacity cursor特性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論