css3标签整理

admin

多重背景

1. .night-sky {
   
2.         background-color: navy; /* fallback color */
   
3.         background-image:
   
4.                  url(../img/ufo.png),
   
5.                  url(../img/stars.png),
   
6.                 url(../img/stars.png),
   
7.                 url(../img/sky.png);
   
8. 
   
9.         background-position:
   
10.                  50% 102%,
    
11.                  100% -150px,
    
12.                  0 -150px,
    
13.                  50% 100%;
    
14. 
    
15.         background-repeat:
    
16.                 no-repeat,
    
17.                 no-repeat,
    
18.                 no-repeat,
    
19.                 repeat-x;

复制代码

简写：

1. .night-sky {
   
2.         /* fallback with both a color and image */
   
3.         background: navy url(../img/ufo.png) no-repeat center bottom;
   
4.        
   
5.         /* for supporting browsers */
   
6.         background:                
   
7.                 url(../img/ufo.png) no-repeat 100% 100%,
   
8.                 url(../img/stars.png) no-repeat 100% -150px,
   
9.                 url(../img/stars.png) no-repeat 0 -150px,
   
10.                 url(../img/sky.png) repeat-x 50% 100%;

复制代码

admin

渐变背景
background: linear-gradient(silver, black);   默认从上到下渐变。 线性渐变。
background: linear-gradient(to left, silver, black);  从右到左。
background: linear-gradient(to bottom right, aqua, navy);  从左上方向右下方渐变。
background: linear-gradient(120deg, aqua, navy);   上方0度，右侧90度，下方180度，左侧270度。数值代表渐变结束的点。
background: linear-gradient(yellow 10%, green);用百分数指定颜色停止位置。
background: linear-gradient(to top right, yellow, green 70%, blue);指定颜色位置。


background: radial-gradient(yellow, red);  径向渐变。
background:radial-gradient(at top, yellow, red)； 从顶部开始。
background: radial-gradient(100px 50px, yellow, red);  横向 纵向尺寸
background:radial-gradient(70% 90% at bottom left, yellow, red); 尺寸比例
background: radial-gradient(closest-side at 70px 60px, yellow, lime, red); 起点位置
background: radial-gradient(30px 30px at 65% 70%, yellow, lime, red); 渐变尺寸+起点位置

admin

生成内容效果   :before    :after
.more:after {
    content: " »";
}             添加一个箭头符号。

控制气泡的悬停出现：

1. /* SHOW AND HIDE
   
2. ------------------------------------- */
   
3. .map:hover {
   
4.         cursor: pointer;
   
5. }
   
6. 
   
7. .cities {
   
8.         left: -999em; /* hide by default by positioning off screen */
   
9. }
   
10. 
    
11. .map:focus + .cities,
    
12. .map:hover + .cities {
    
13.         left: 50%;
    
14. }

复制代码

开始显示于屏幕之外，悬停时重新定位位置，使其可见。

admin

transparent 用法之  css绘制三角形：

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}



#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}




#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}




#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}


.triangle3{
width:0px;
height:0px;
border:solid transparent;
border-left-color:red;
border-width:100px;
}

admin

css sprite     css精灵
是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。
前端：

1. <ul class="documents">
   
2.         <li><a href="expenses.xls" class="icon">Business expenses</a></li>
   
3.         <li><a href="user-manual.pdf" class="icon">User Manual</a></li>
   
4.         <li><a href="story.docx" class="icon">Short story</a></li>
   
5.         <li><a href="brochure.pdf" class="icon">Vacation brochure</a></li>
   
6. </ul>

复制代码

css：

1. .icon {
   
2.         display: inline-block;
   
3.         line-height: 1.1;
   
4.         font-size: .875em;
   
5.         min-height: 16px; /* set to height of icon so it isn't cut off at all */
   
6.         padding-left: 23px;
   
7.         padding-top: 2px;
   
8. 
   
9.         /* allows positioning the icon absolutely
   
10.         relative to elements with class="icon" in the HTML */
    
11.         position: relative;
    
12. }
    
13. 
    
14. .icon:before {
    
15.         background-image: url(../img/sprite.png);
    
16.         content: " ";
    
17.         display: block;
    
18.         height: 16px; /* icon height */
    
19.         left: 0; /* default. change this if want the icon to appear in different spot */
    
20.         position: absolute;
    
21.         width: 16px; /* icon width */
    
22.         top: 0; /* default. change this if want the icon to appear in different spot */
    
23. }
    
24. 
    
25. /* Shift position of sprite image for any
    
26. document filename that ends with .xls */
    
27. a[href$=".xls"]:before {
    
28.         background-position: -17px 0;
    
29. }
    
30. 
    
31. /* Shift position of sprite image for any
    
32. document filename that ends with .docx */
    
33. a[href$=".docx"]:before {
    
34.         background-position: -34px 0;
    
35. }
    

复制代码

效果：