-
設置background-origin之前必須先設置該盒子有padding，border，
查看全部 -
列間距
column-gap:normal，<length>可以使用px,em單位的任何整數值
查看全部 -
多列
列寬和列數
columns：150px 2;
要加各瀏覽器的私有前綴
-webkit-columns: 150px 3;
? -moz-columns: 150px 3;
? -o-columns:150px 3;
? -ms-columns: 150px 3;
查看全部 -
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )
查看全部 -
chrome、safari、firefox、opera
查看全部 -
Text- shadow 設置文本的文字是否有陰影的效果查看全部
-
：inset 可以寫在參數的第一個或最后一個，其它位置是無效的。
查看全部 -
background-origin屬性可以改變背景圖片的初始位置，但是這個背景圖片必須是no-repeat
否則該屬性無效，并且從邊框開始顯示
這個屬性有三個值border-box/padding-box/content-box
他們分別代表的是：
1.從邊框開始顯示，也就是會被邊框給遮住一些
2.從內邊距開始顯示，這是默認值，通常我們使用的也是這個
3.從內容區域開始顯示查看全部 -
text-shadow可以用來設置文本的陰影效果。
語法：
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示陰影的水平偏移距離，其值為正值時陰影向右偏移，反之向左偏移； ? ? ?
Y-Offset：是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移，反之向上偏移；
Blur：是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設置為0；
Color：是指陰影的顏色，其可以使用rgba色。查看全部 -
::before和::after這兩個主要用來給元素的前面或后面插入內容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。/*類名為clearfix的div元素*/
.clearfix::before,
.clearfix::after?{
????content:?"";?/*content的中文是內容，感覺是在div的前后插入?內容為?空，相當于加入一個空元素*/
????display:?block;?/*顯示為塊狀元素*/
????height:?0;?/*高度為0*/
????visibility:?hidden;?/*visbility是可見性，可視化的意思，hidden隱藏*/
}
.clearfix:after?{clear:?both;}/*clear?:?none?|?left|right|?both?。clear為清除浮動，clear:both為清除全部浮動*/
.clearfix?{zoom:?1;}/*低版本IE瀏覽器的清除浮動*/陰影效果，也是通過這個來實現的.effect::before,?.effect::after{??/*類名為effect的div元素*/
????content:"";?/*content的中文是內容，感覺是在div的前后插入?內容為?空，相當于加入一個空元素，然后為這兩個空元素添加陰影特效*/
????position:absolute;??/*絕對定位*/
????z-index:-1;?/*遮罩效果，值小的遠離用戶*/
????-webkit-box-shadow:0?0?20px?rgba(0,0,0,0.8);?/*-webkit是為了讓chrome和safari瀏覽器更好的兼容。加入邊框陰影:X軸偏移量，Y軸偏移量，[陰影顏色]?rgba的a是透明度參數*/
????-moz-box-shadow:0?0?20px?rgba(0,0,0,0.8);?/*-moz是為了讓Firefox兼容*/
????box-shadow:0?0?20px?rgba(0,0,0,0.8);
????top:50%;?/*div元素高離父元素的50%*/
????bottom:0;??/*底部距離父元素為0，貼緊底部*/
????left:10px;
????right:10px;
????-moz-border-radius:100px?/?10px;?/*圓角效果*/
????border-radius:100px?/?10px;?/*如果“/”前后的值都存在，那么“/”前面的值設置其水平半徑，“/”后面值設置其垂直半徑*/
}上面代碼作用在class名叫.effect上的div的前（before）后(after)都添加一個空元素，然后為這兩個空元素添加陰影特效<!DOCTYPE?html>
<html>
<head>
<meta?charset=utf-8?/>
<title>before、after</title>
</head>
<body>
??<div?class=".effect">
</div>
</body>
</html>查看全部 -
“::selection”偽元素是用來匹配突出顯示的文本(用鼠標選擇文本時的文本)。瀏覽器默認情況下，用鼠標選擇網頁文本是以“深藍的背景，白色的字體”顯示的.
1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 選擇器。2、Firefox 支持替代的 ::-moz-selection。
查看全部 -
:checked選擇器z-index:100：使按鈕在上一層，不加點擊區域會不靈敏name相同才能建立互斥關系，一個選中另一個取消。+是css相鄰選擇符：????????共4種關系選擇符：空格：+>在偽類選擇器中用opacity：0-1透明度
查看全部 -
/* 選擇第n個，n位數字? */
:nth-child(n)
選擇列表中的偶數標簽
:nth-child(2n)
選擇列表中的奇數標簽
:nth-child(2n-1)
選擇前幾個元素
/*【負方向范圍】選擇第1個到第6個 */
:nth-child(-n+6){}
從第幾個開始選擇
/*【正方向范圍】選擇從第6個開始的，直到最后? */
:nth-child(n+6){}
兩者結合使用，可以限制選擇某一個范圍
/*【限制范圍】選擇第6個到第9個，取兩者的交集【感謝小伙伴的糾正~】 */
:nth-child(-n+9):nth-child(n+6){}
選擇列表中的倒數第n個標簽 n為數字
:nth-last-child(n)?
查看全部 -
>是子元素選擇器，空格是后代選擇器，他們的區別：
后代選擇器：匹配父子關系和祖先-后代關系
子元素選擇器：匹配父子關系
就是>（子元素選擇器 用于選擇指定標簽元素的第一代子元素
）只是匹配到他下面的一層，而不是多層查看全部 -
:target選擇器
分析：
1、具體來說，觸發元素的URL中的標志符通常會包含一個#號，后面帶有一個標志符名稱，上面代碼中是：#brand
2、：target就是用來匹配id為“brand”的元素（id="brand"的元素）,上面代碼中是那個div元素。
多個url（多個target）處理：
就像上面的例子，#brand與后面的id="brand"是對應的，當同一個頁面上有很多的url的時候你可以取不同的名字，只要#號后對的名稱與id=""中的名稱對應就可以了。
如下面例子：
html代碼：
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
content for aron
</div>
css代碼：
#brand:target {
background: orange;
color: #fff;
}
#jake:target {
background: blue;
color: #fff;
}
#aron:target {
background: red;
color: #fff;
}
上面的代碼可以對不同的target對象分別設置不的樣查看全部
舉報