亚洲操图,福利在线观看,男女免费视频在线观看,爱爱一区二区三区,五月婷婷色丁香,午夜国产在线,香蕉大人久久国产成人AV,欧美性爱播放

點(diǎn)擊上方藍(lán)色字體，關(guān)注我啦～～

◆◆CSS技巧大雜燴
◆◆
01?Safari 中z-index的層級(jí)問題

在Safari瀏覽器下(此Safari瀏覽器包括iOS的Safari，iPhone上的微信瀏覽器，以及Mac OS X系統(tǒng)的Safari瀏覽器)，當(dāng)我們使用3D transform變換的時(shí)候，如果祖先元素沒有overflow:hidden/scroll/auto等限制，則會(huì)直接忽略自身和其他元素的z-index層疊順序設(shè)置，而直接使用真實(shí)世界的3D視角進(jìn)行渲染。例如下面的場(chǎng)景，圖中紅框里面的模塊，使用 3D transform變換，進(jìn)行旋轉(zhuǎn)動(dòng)畫，但是在Safari瀏覽器下，忽略了二維碼遮罩層的z-index,結(jié)果使用了真實(shí)世界的3D視角進(jìn)行渲染。出現(xiàn)了重疊的bug：

解決方法：

父級(jí)，任意父級(jí)，非body級(jí)別，設(shè)置overflow:hidden可恢復(fù)和其他瀏覽器一樣的渲染。
以毒攻毒。有時(shí)候，頁(yè)面復(fù)雜，我們不能給父級(jí)設(shè)置overflow:hidden，那么可以將被影響的元素設(shè)置一個(gè)足夠大的translateZ值就可以，如translateZ(100px)。

02文字居中兼容

正常處理文字上下居中的手段是讓元素height和line-height相等，但是安卓環(huán)境下當(dāng)字體大小<14px/0.7rem的時(shí)候會(huì)出現(xiàn)居中失效的情況。

解決方法：

判斷系統(tǒng)環(huán)境（安卓/IOS）分別作微調(diào)；
font-size、height、width全部放大為2倍，利用transform進(jìn)行縮放

height: 1rem;
width: 2rem;
font-size: 0.5rem;

變成：
height: 2rem;
width: 4rem;
font-size: 1rem;
transform: scale(0.5);

但由于放大之后占據(jù)空間，左右會(huì)留白，需要利用margin負(fù)值 margin: -0.35rem -0.45rem 0;調(diào)整

有解決方案是將rem改為px。

032個(gè)a標(biāo)簽做90度旋轉(zhuǎn)bug

定義了一個(gè)動(dòng)畫效果如下(sass代碼)：

@keyframes official-featured_rotate {
   10%,50%{
transform:rotateY(90deg);
    }
    60%,100%{
transform:rotateY(0deg);
    }
}
&-rotate {
position: absolute;
width: rem(350/2);
height: rem(160/2);
transform-style:preserve-3d;
transform:translate3d(0,0,0);
    &.ani_rotate {
animation:official-featured_rotate 5s linear 0s infinite;
animation-delay: 2s;
    }
    &__item {
width: rem(350/2);
height: rem(160/2);
position: absolute;
        &:nth-child(1) {
transform: translateZ(rem(350/4));
        }
        &:nth-child(2) {
transform: rotateY(90deg) translate3d(0,0,rem(350/4));
        }
    }
}

這里是2個(gè)a標(biāo)簽，做90度的旋轉(zhuǎn)效果使得兩個(gè)a可以循環(huán)切換展示。這里2個(gè)的基本樣式是一致的，寬高也一樣。但是在安卓下（ios正常）只有打開頁(yè)面能看到的第一個(gè)a標(biāo)簽?zāi)苷ＬD(zhuǎn)，能正常綁定事件。第二個(gè)a不能跳轉(zhuǎn)，我就想那我通過點(diǎn)擊事件來跳轉(zhuǎn)可以不，結(jié)果綁定任何事件都不生效。

解決方法：

然后測(cè)試發(fā)現(xiàn)，在旋轉(zhuǎn)過程中（只要未完全旋轉(zhuǎn)90度）點(diǎn)擊還是能一切正常的。于是把旋轉(zhuǎn)角度改為了89.99度，一切正常。動(dòng)畫效果修改為：

@keyframes official-featured_rotate {
    10%,50%{ ?
 ? ? ?transform:rotateY(-89.99deg); ?
 ? ?}
 ? ?60%,100%{ ?
 ? ? ?transform:rotateY(0deg); ?
 ? ?} ?
}

后來查找了一下stackoverflow(https://stackoverflow.com/questions/23548612/cant-click-on-buttons-after-css-transform)。里面也是說了這個(gè)解決方法。

04使用currentColor來簡(jiǎn)化css

設(shè)置border-color、background-color等顏色的時(shí)候，可以使用currentColor[與當(dāng)前元素的字體顏色相同]來簡(jiǎn)化css。

.div{
color: rgba(0,0,0,.85);
font-weight: 500;
text-align: left;
padding: 20px;
border: solid 1px currentColor;
}

05灰色濾鏡做樣式的disable

灰色圖可以直接加濾鏡，不用切多一張圖。如圖：

解決方法：

.coupon_style .disable {
-webkit-filter: grayscale(1);
}

06?曲線陰影的實(shí)現(xiàn)

多個(gè)陰影重疊，就是正常陰影+曲線陰影
正常情況下，有個(gè)矩形有正常的陰影，作為主投影，這時(shí)候再定義一個(gè)有一定弧度圓角的圓角矩形，然后放在正常矩形的下面，并露出一點(diǎn)點(diǎn)底部有弧度的陰影，這樣的話就可以形成曲線投影的效果。

效果：

代碼：

07翹邊陰影的實(shí)現(xiàn)

利用:before和:after，加上絕對(duì)定位的性質(zhì)，可以形成一個(gè)矩形，這個(gè)時(shí)候結(jié)合CSS3的傾斜屬性skew和旋轉(zhuǎn)屬性rote。就可以形成一個(gè)有旋轉(zhuǎn)角度的平行四邊形，這個(gè)時(shí)候再和原來的矩形重疊，則可產(chǎn)生翹邊效果。

效果：

代碼：

08用-webkit-mask實(shí)現(xiàn)蒙版

效果圖：

代碼：

background: url("images/logo.png") no-repeat;-webkit-mask : url("images/mask.png");

mask.png中黑色代表是不透明的（alpha：1）,其他部分為透明的（alpha：0），將它蓋在背景圖上，注意：背景圖對(duì)應(yīng)mask.png中透明的位置也會(huì)變成透明，留下非透明的形狀，即背景圖的可見形狀與mask.png的可見形狀相同，即為"蒙版"。

09圖片自適應(yīng)占位方式

當(dāng)圖片未正確加載，或加載完成前，由于圖片高度為0，其容器會(huì)因?yàn)闆]有內(nèi)容，導(dǎo)致容器無法撐高而塌陷，而如果加載較慢則會(huì)在圖片加載完成后出現(xiàn)閃爍的情況。

css中，當(dāng)padding-top/bottom值為百分比時(shí)，其值都是以其父元素的寬度為參照對(duì)象。因此對(duì)于寬高比例固定的情況，可以利用padding-top/bottom用于圖片自適應(yīng)占位，解決頁(yè)面閃爍的問題。

如果僅設(shè)置值padding-top/bottom為百分比，會(huì)出現(xiàn)一個(gè)問題，就是該方法容器的max-height屬性會(huì)失效，就無法限制容器的最大高度了。

因此，可以給容器添加一個(gè)偽元素的子元素用于撐起內(nèi)容，該子元素?fù)碛幸粋€(gè)padding-top:100%，同時(shí)給容器一個(gè)max-height嘗試限制容器的高度，最后內(nèi)容用絕對(duì)定位的方式添加即可。如：

#container{
width: 50%;
max-height:300px;
background-color:#ddd;
/*由于margin存在塌陷的問題，需要通過構(gòu)建BFC來保證容器不會(huì)受到影響，因此這里可以給容器一個(gè)overflow:hidden來保證偽元素的margin不會(huì)塌陷。*/
overflow:hidden;
position: relative; /* 父容器相對(duì)定位 */
}
.placeholder::after{
content:"";
display:block;
margin-top:100%;
}
img{
position:absolute;  /* 內(nèi)容絕對(duì)定位 */
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%); /* 控制內(nèi)容絕對(duì)定位位置 */
width:80%;   /* 控制圖片不溢出，因此這里使用的圖片實(shí)際寬度受父容器影響 */
}

但是對(duì)于寬高比例不定的圖片來說，這樣做可能導(dǎo)致圖片顯示不全，使用時(shí)要注意。

10頁(yè)面自適應(yīng)最佳實(shí)踐

經(jīng)過大型項(xiàng)目實(shí)踐，下面這段CSS是最好的基于rem和vm和calc實(shí)踐代碼：

html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6的375px尺寸作為16px基準(zhǔn)，414px正好18px大小, 600 20px */
font-size: calc(100% + 2 * (100vw - 375px) / 39);
font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
html {
/* 414px-1000px每100像素寬字體增加1px(18px-22px) */
font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 600px) {
html {
/* 600px-1000px每100像素寬字體增加1px(20px-24px) */
font-size: calc(125% + 4 * (100vw - 600px) / 400);
font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min-width: 1000px) {
html {
/* 1000px往后是每100像素0.5px增加 */
font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
}

能讓你受益匪淺的10個(gè)css使用技巧

解決方法：