postion

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

1、接收一個(gè)值

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

// 單個(gè)屬性值
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;
//依次等價(jià)于
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、接收兩個(gè)值

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

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

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

3、接收3個(gè)值或4個(gè)值

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

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

cursor

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

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

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

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

opacity

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

opacity計(jì)算規(guī)則

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

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

opacity的邊界

因?yàn)閛pacity的范圍是0-1，如果我們?cè)O(shè)置的值不在這個(gè)范圍之內(nèi)，那么系統(tǒng)會(huì)按邊界值去顯示。

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

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

border-radius

平時(shí)工作中，我們最常用到的就是像素和百分比去設(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? ?四部分組成。

當(dāng)只有1個(gè)值時(shí)，這個(gè)值的效果會(huì)作用四個(gè)角：? ?border-radius: 5px? ?

當(dāng)有2個(gè)值時(shí)，第一個(gè)值作用于左上角和右下角，第二個(gè)值作用于右上角和左下角: ? ?border-radius：6px 10%? ?

當(dāng)有3個(gè)值時(shí)，第一個(gè)值作用于左上角，第二個(gè)值作用于右下角和左下角，第三個(gè)值作用于右下角: ? ?border-radius: 3px 5% 6px? ?

當(dāng)有4個(gè)值時(shí)，第一個(gè)值作用于左上角，第二個(gè)值作用于右上角，第三個(gè)值作用于右下角，第四個(gè)值作用于左下角: ? ?border-radius: 6px 7% 8px 4px? ?

還有一些等價(jià)的縮寫形式：

border-top-left-radius: 5px;
// 等價(jià)于
border-radius: 5px 5px;

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

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

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

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

border-bottom-right-radius: 100%;

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

最新評(píng)論