1、圓角邊框
border-radius:0.08rem;
-moz-border-radius: 0.08rem;
-webkit-border-radius: 0.08rem;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
移動端border-radius:0.08rem;
box-sizing:border-box;
2、偽類排序
:first-child
:last-child
:nth-of-type(1)
:nth-child(odd)奇數
:nth-child(even)偶數
3、透明背景
background-color: rgba(0, 0, 0, 0.2);
4、長度擷取
overflow: hidden;
max-width: 5rem; text-overflow: ellipsis;white-space: nowrap;
5、左右對齊
text-align:justify;text-justify:inter-ideograph;
6、固定2行
max-width: 4.8rem;
text-align:justify;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
7、flex
display:flex;
justify-content:center;
align-items:center;
flex-start | flex-end
靠左 justify-content:flex-start;
靠右 justify-content:flex-end;
8、絕對定位圖示
單用 vertical-align: middle; margin-bottom: 0.04rem;
定位position: absolute;left: 0rem; top: 0rem;
display: inline-block;
width: 0.3rem;
height: 0.3rem;
box-sizing: border-box;
background: url(…/images/hc_icon.png) no-repeat;
background-size: 3rem 1.2rem;
background-position:0rem -0.3rem;
9、邊框陰影
box-shadow: 0 0 0.06rem #dbdbdb;
10、文字投影
text-shadow:0.02rem 0.02rem 0.04rem #494c4f;
11、背景模糊
filter:blur(0.02rem);
-webkit-filter:blur(0.02rem);
12、背景平鋪，可以自動居中
width:100%;
height:0;
padding-bottom: 100%;
overflow:hidden;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
13、背景繪製區域
background-clip: border-box|padding-box|content-box;全部/盒子/內容
20、input預設顯示顏色
.tt_ss_box ::-webkit-input-placeholder
.tt_ss_box ::-moz-input-placeholder
.tt_ss_box ::-ms-input-placeholder
其他style=「background-image: url(./images/tb_04.jpg);」
虛線dashed 點線dotted
手型 cursor:pointer
純CSS3實現的標籤效果
1.效果分析 純css3實現的標籤效果，如圖1所示，看看demo。該標籤主要有三個部分組成，左側的三角形 右側的圓角矩形和文字前面的小圓點。重點在左側三角形和文字前面圓點的實現。2.技術難點 三角形利用寬和高為零的元素的邊框實現。將邊框設定為12px solid transparent，然後將右側邊...
純CSS3實現的標籤效果
1.效果分析 純css3實現的標籤效果，如圖1所示，看看demo。該標籤主要有三個部分組成，左側的三角形 右側的圓角矩形和文字前面的小圓點。重點在左側三角形和文字前面圓點的實現。2.技術難點 三角形利用寬和高為零的元素的邊框實現。將邊框設定為12px solid transparent，然後將右側邊...
css3 濾鏡效果
色相旋轉 曾經和photoshop色相 飽和度面板打過交道嗎？現在好了，你可以在瀏覽器中應用它。img 如果對這個度數值如何設定感到困惑，可以試想一下乙個色輪。您指定的度數值決定了該輪停止之處。這意味著 0deg將不會有任何效果，而50deg會相應的轉動撥盤。在這種情況下，nettuts 的標誌將採...