資訊專欄INFORMATION COLUMN
摘要：支持算法和是與這次寬度和高度的最大值或最小值有關(guān)，取決于哪個(gè)更大和更小。例如，如果瀏覽器設(shè)置為寬高，會(huì)是為。然而，如果寬度設(shè)置為，高度設(shè)置為，將會(huì)等于而將會(huì)是。禁用鼠標(biāo)事件
css黑科技
currentColor當(dāng)前顏色
返回 .icon { display: inline-block; width: 16px; height: 20px; background-image: url(http:jartto.wang/test.png); background-color: currentColor; /* 該顏色控制圖標(biāo)的顏色 */ background-position: 0 0; } .link:hover { color: #333; /* 雖然改變的是文字顏色，但是圖標(biāo)顏色也一起變化了 */ }
vh、vw、vmin、vmax單位
瀏覽器的視口的寬、高被分為100份，1vh相當(dāng)于瀏覽器高度的百分之一，即瀏覽器的高度為800px,則1vh=8px。
vw寬度同理。vh、vw支持calc算法
.box{
height: calc(100vh - 50px);
}
h1 {
font-size: 8vw;
}
vmin和vmax是與這次寬度和高度的最大值或最小值有關(guān)，取決于哪個(gè)更大和更小。例如，如果瀏覽器設(shè)置為
1100px寬、700px高，1vmin會(huì)是7px,1vmax為11px。然而，如果寬度設(shè)置為800px，高度設(shè)置為1080px，
1vmin將會(huì)等于8px而1vmax將會(huì)是10.8px。
.box{
height: calc(100vmax - 50px);
}
邊框多個(gè)顏色
.box{
border-style:solid;
border-color:red green blue pink;
}
必須設(shè)置border-style才會(huì)有效果
css畫小箭頭
使用border和transparent屬性實(shí)現(xiàn)
/*箭頭向上*/
.arrow-up {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #fff;
}
/*箭頭向下*/
.arrow-down {
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #0066cc;
}
圖片濾鏡效果
使用filter屬性可以實(shí)現(xiàn)各種各樣的圖片效果，包括以下屬性
grayscale 灰度 sepia 褐色 saturate 飽和度 hue-rotate 色相旋轉(zhuǎn) invert 反色 opacity 透明度 brightness 亮度 contrast 對(duì)比度 blur 模糊 drop-shadow 陰影
瀏覽器滾動(dòng)條美化（僅支持webkit內(nèi)核瀏覽器）
/*滾動(dòng)條 start*/
::-webkit-scrollbar {
width: 1px;
height: 4px;
background-color: #F5F5F5;
}
/*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background: #fff ;
}
/*定義滑塊 內(nèi)陰影+圓角*/
::-webkit-scrollbar-thumb {
border-radius: 3px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
// background-color:rgba(7, 170, 247, 0.7);
background-color: transparent;
}
::-webkit-scrollbar-thumb:hover {
border-radius: 3px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:rgba(7, 170, 247, 1);
}
使用 :not() 在菜單上應(yīng)用/取消應(yīng)用邊框
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
瀏覽器默認(rèn)行高line-height一般為1.15倍，可以給body設(shè)置line-height:1來(lái)設(shè)置行高為1.0倍
body{
line-height: 1;
}
使用負(fù)的 nth-child 選擇項(xiàng)目
在CSS中使用負(fù)的 nth-child 選擇項(xiàng)目1到項(xiàng)目n。
li {
display: none;
}
li:nth-child(-n+3) {
display: block;
}
禁用鼠標(biāo)事件
.disabled {
pointer-events: none;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90225.html
摘要：支持算法和是與這次寬度和高度的最大值或最小值有關(guān)，取決于哪個(gè)更大和更小。例如，如果瀏覽器設(shè)置為寬高，會(huì)是為。然而，如果寬度設(shè)置為，高度設(shè)置為，將會(huì)等于而將會(huì)是。禁用鼠標(biāo)事件 css黑科技 currentColor當(dāng)前顏色 返回 .icon { display: inline-block; width: 16px; height: 20px; background-im...
摘要：支持算法和是與這次寬度和高度的最大值或最小值有關(guān)，取決于哪個(gè)更大和更小。例如，如果瀏覽器設(shè)置為寬高，會(huì)是為。然而，如果寬度設(shè)置為，高度設(shè)置為，將會(huì)等于而將會(huì)是。禁用鼠標(biāo)事件 css黑科技 currentColor當(dāng)前顏色 返回 .icon { display: inline-block; width: 16px; height: 20px; background-im...
摘要：用來(lái)控制表格單元格寬度你也許遇到過(guò)給表格設(shè)置了寬度，但是不起作用的問(wèn)題。這是因?yàn)閱卧竦膶挾仁歉鶕?jù)其內(nèi)容進(jìn)行調(diào)整的。顯而易見(jiàn)的，默認(rèn)情況下，單元格寬度受其內(nèi)容約束。而設(shè)置了后，其單元格寬度變得可控了。 本文首發(fā)于我的博客在上文《你不知道的CSS（一）》中，介紹了兄弟選擇器美化表單，font-size:0消除間隙，overflow清除浮動(dòng)，border繪制三角形等7個(gè)實(shí)用技巧。由于文章長(zhǎng)...
摘要：本文首發(fā)于我的博客在前面兩篇文章你不知道的一和你不知道的二中大致介紹了一些方面比較隱晦的但又很實(shí)用的技巧。系列文章你不知道的一你不知道的二本文首發(fā)于我的博客 本文首發(fā)于我的博客 在前面兩篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介紹了一些CSS方面比較隱晦的但又很實(shí)用的技巧。相信這些技巧會(huì)為大家在項(xiàng)目實(shí)踐中帶來(lái)一定的幫助，本文作為《你不知道的CSS》系列的第三篇...
閱讀 1418·2021-10-11 10:59
閱讀 3117·2019-08-30 15:54
閱讀 2737·2019-08-30 13:19
閱讀 2465·2019-08-30 13:02
閱讀 2380·2019-08-30 10:57
閱讀 3359·2019-08-29 15:40
閱讀 989·2019-08-29 15:39
閱讀 2314·2019-08-29 12:40
