Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 精品国产三级a在线观看,99草精品视频,欧美精品午夜 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          每天一個(gè)CSS小技巧 - 梯形標(biāo)簽頁(yè)
          
        
           
          
	
	
          
		
                        
          案
          這是我們最開(kāi)始的代碼及效果：
          <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 50px;

      background: #1b6f9b;
      text-align: center;
      line-height: 50px;
      font-size: 1.5em;
      color: white;
    }
  </style>
</head>
<body>
  <div class="box">TRAPEZOID</div>
</body>
</html>
          這里的想法是把上圖中的目標(biāo)想象成一個(gè)3D的目標(biāo)，然后如果能往圖里旋轉(zhuǎn)一下，映射在屏幕上的就是梯形了，因此：
          transform: perspective(.5em) rotateX(5deg);
          由于我們是對(duì)整個(gè)元素應(yīng)用3D變形，因此上面的文字也變形了。
          這里需要注意的是，對(duì)元素使用了3D變形之后，其內(nèi)部的變形效果是“不可逆轉(zhuǎn)的”，這一點(diǎn)跟2D變形不同，在2D變形的體系下，內(nèi)部的逆向變形可以抵消外部的變形效應(yīng)。
          因此我們可以這么做，用偽元素
            <style>
    .box{
      width: 200px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 1.5em;
      color: white;
      margin-left: 20px;

      position: relative;
    }

    .box::before{
      content: '';
      position: absolute;
      top:0;right: 0;left: 0;bottom: 0;
      z-index: -1;
      background: #1b6f9b;
      transform: perspective(.5em) rotateX(5deg);
    }
  </style>
          這個(gè)方法確實(shí)可以生成一個(gè)基本的體型，但因?yàn)槲覀儧](méi)有設(shè)置transform-origin，應(yīng)用變形效果會(huì)讓這個(gè)元素以它自身的中心線為軸進(jìn)行空間上的旋轉(zhuǎn)。因此，元素投射到2D屏幕上的尺寸會(huì)發(fā)生多種變化。
          為了讓它的尺寸更好的掌握，我們可以為它指定transform-origin:bottom；當(dāng)它在3D空間中旋轉(zhuǎn)時(shí)，可以把它的底邊固定住。
                transform-origin: bottom;
          現(xiàn)在它看起來(lái)直觀多了，只有高度會(huì)發(fā)生變化。不過(guò)這樣一來(lái)，高度的縮水就會(huì)變得更加顯眼，因?yàn)楝F(xiàn)在整個(gè)元素是轉(zhuǎn)離屏幕前的觀眾；而在這之前，元素的上半部分會(huì)轉(zhuǎn)向屏幕后面，而下半部分會(huì)轉(zhuǎn)出屏幕。
          這里，我們通過(guò)變形屬性來(lái)改變它的尺寸：
          言
          在前端開(kāi)發(fā)中經(jīng)常會(huì)用到很多的簡(jiǎn)易圖形，例如三角形，箭頭，圓形等。有很多人一開(kāi)始會(huì)想著用小的圖片實(shí)現(xiàn)，不過(guò)這樣會(huì)增加頁(yè)面請(qǐng)求次數(shù)，延緩頁(yè)面加載效果。
          在CSS中有個(gè)border屬性，它完全可以達(dá)到制作各種簡(jiǎn)易圖形的效果，今天我們就一起來(lái)看看吧。
          文章中的代碼都已經(jīng)放在了github上，感興趣的同學(xué)自取。
          https://github.com/zhouxiongking/article-pages/blob/master/articles/border/border.html
          CSS
          border講解
          在制作各種簡(jiǎn)易圖形之前，我們先來(lái)看看border屬性的使用。
          border是一個(gè)復(fù)合屬性。
          • border-width表示邊框?qū)挾取?/p>
          • border-style表示邊框樣式，設(shè)置實(shí)線，虛線，點(diǎn)狀等。
          • border-color表示邊框顏色，還可以設(shè)置transparent，表示透明。
          border又分為上下左右四個(gè)方向，每個(gè)方向都占據(jù)各自的空間，不會(huì)出現(xiàn)重疊的地方，尤其是在四個(gè)方向的邊框都設(shè)置的情況下，在四個(gè)角處也不會(huì)出現(xiàn)重疊。
          我們來(lái)看個(gè)最簡(jiǎn)單的例子，在四個(gè)方向上都設(shè)置邊框，賦予不同的顏色。
          圖片1
          通過(guò)上面的圖片1可以看出，四個(gè)角處是分離，沒(méi)有重合的。
          梯形
          首先我們來(lái)看看梯形的效果圖。
          梯形效果圖
          我們?cè)賮?lái)分析下梯形是如何實(shí)現(xiàn)的。
          • 因?yàn)槲覀兺耆峭ㄟ^(guò)border設(shè)置，所以這個(gè)div的高度應(yīng)該為0。
          • 梯形的左右兩個(gè)腰，恰好如同border在角的銜接處，然后將兩側(cè)的border-style設(shè)置為transparent。
          因此我們可以得到以下的CSS代碼。
          梯形的CSS代碼
          修改border-left和border-right的寬度值，可以改變梯形的形狀。
          三角形
          三角形也分為上下左右四個(gè)方向，我們首先來(lái)看看總體的形狀。
          三角形
          然后我們也來(lái)分析下如何實(shí)現(xiàn)這個(gè)效果，以下三角形為例。
          • 因?yàn)槭浅尸F(xiàn)三角形的形狀，剛好契合border在角落的銜接處，因此高度和寬度都應(yīng)該為0。
          • 下三角形是上部有區(qū)域，所以要設(shè)置border-top。
          • border-left和border-right兩個(gè)方向都要設(shè)置寬度，然后設(shè)置為透明即可。
          因此得到以下的CSS代碼，設(shè)置不同方向border的寬度，三角形的形狀也會(huì)跟著變。
          下三角形CSS代碼
          同理，只要掌握了其中一個(gè)方向的三角形原理，就會(huì)輕松寫出其他方向三角形的CSS代碼。
          這里直接給出上三角形的CSS代碼。
          上三角形CSS代碼
          左三角形的CSS代碼如下所示。
          左三角形CSS代碼
          右三角形的CSS代碼如下所示。
          右三角形CSS代碼
          正方形-四種顏色
          接下來(lái)我們看一種基本的只用border設(shè)計(jì)的形狀。
          圖形
          它的實(shí)現(xiàn)方式也很簡(jiǎn)單，只需要將width和height設(shè)置為0，然后將border四個(gè)方向的寬度設(shè)置成一樣的即可。
          得到的代碼如下所示。
          CSS代碼
          直角三角形
          基于上述的實(shí)現(xiàn)，我們可以得到左下，左上，右上，右下四種三角形。
          首先看看基本形狀。
          直角三角形
          看到圖形后，我們很容易發(fā)現(xiàn)，只要隱藏掉連接的兩個(gè)方向的border，顯示出另外兩個(gè)方向的border，就可以得到直角三角形。
          這里我們只展示出左上三角形的CSS代碼。
          左上直角三角形CSS代碼
          其他方向的直角三角形代碼可類比得出，大家可以試一下。
          六角星
          首先我們看看六角星的形狀。
          六角星
          看到這個(gè)圖形，大家應(yīng)該能想到可以由上下兩個(gè)三角形構(gòu)成，只要將上下兩個(gè)三角形位置對(duì)應(yīng)準(zhǔn)確。
          這里為了節(jié)省頁(yè)面元素的空間，我們可以采用偽元素去實(shí)現(xiàn)。
          • 將頁(yè)面顯示元素設(shè)置為上三角形。
          • 利用:after偽元素設(shè)置下三角形。
          • 設(shè)置偽元素的position為absolute，調(diào)節(jié)right和top值。
          通過(guò)上述分析，我們得到以下CSS代碼。
          六角星CSS代碼
          圓形
          與border屬性搭配使用的還有一個(gè)很常用的屬性，那就是border-radius。
          border-radius是專門設(shè)置圓角的，可以讓90度角變?yōu)閳A角。
          我們首先看看最基本的圓形的樣子。
          圓形
          其實(shí)我們只需要將border-radius屬性設(shè)置為寬或者高的一半以上即可。代碼如下所示。
          圓形
          同心圓
          我們來(lái)看看同心圓的樣子。
          同心圓
          同心圓只需要設(shè)置一個(gè)border邊框，給border設(shè)置一個(gè)特殊的背景色，給div設(shè)置成白色背景即可。
          同心圓CSS代碼
          半圓
          我們來(lái)看看半圓的形狀。
          半圓
          半圓的效果是如何實(shí)現(xiàn)的呢？
          • 首先元素自身高度設(shè)置為0，設(shè)定寬度值。
          • 設(shè)定上部和右部的border。
          • 設(shè)定左上角和右上角的border-radius值。
          得到的代碼如下所示。
          上半圓
          同理，下半圓，左半圓和右半圓修改對(duì)應(yīng)的值就可以獲得。
          結(jié)束語(yǔ)
          今天這篇文章主要通過(guò)border屬性，畫出了一系列簡(jiǎn)易的圖形，這在實(shí)際中是很實(shí)用的，大家學(xué)會(huì)了嗎?
          言
          我們組要招一個(gè)前端開(kāi)發(fā)，我也借此機(jī)會(huì)整理了一下前端的基礎(chǔ)知識(shí)。否則在面試的時(shí)候如果被別人問(wèn)倒了，人家還以為我們公司沒(méi)有技術(shù)大牛的。
          在復(fù)習(xí)CSS基礎(chǔ)的時(shí)候，我被一個(gè)網(wǎng)友的奇思妙想震驚了，居然可以用border來(lái)畫三角形。在此之前，我都只是用border來(lái)打框框的。[流淚][流淚][流淚]
          正文
          我們比較常規(guī)的用法，就是用border屬性來(lái)設(shè)置邊框，如下所示：
          div {
  width: 100;
  height: 100;
  border: 1px solid;
}
          現(xiàn)在，為了便于觀察，我們將四條邊設(shè)置為不同的顏色，如下所示：
          div {
  width: 100;
  height: 100;
  border-top: 1px solid red;
  border-left: 1px solid orange;
  border-right: 1px solid green;
  border-bottom: 1px solid blue;
}
          注意，神奇的事情即將發(fā)生。將邊框加粗，如下所示：
          div {
  width: 100;
  height: 100;
  border-top: 50px solid red;
  border-left: 50px solid orange;
  border-right: 50px solid green;
  border-bottom: 50px solid blue;
}
          看到了嗎？出現(xiàn)了4個(gè)梯形。接著，將長(zhǎng)度和寬度縮小，如下所示：
          div {
  width: 10;
  height: 10;
  border-top: 50px solid red;
  border-left: 50px solid orange;
  border-right: 50px solid green;
  border-bottom: 50px solid blue;
}
          梯形的短邊越來(lái)越短，直到為0，三角形就出現(xiàn)了。那么，設(shè)置長(zhǎng)度和寬度為0，如下所示：
          div {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-left: 50px solid orange;
  border-right: 50px solid green;
  border-bottom: 50px solid blue;
}
          此時(shí)，四個(gè)方向的三角形就形成了，想要展示哪個(gè)三角形，只需要將其他三個(gè)設(shè)置為透明即可，如下所示：
          div {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
}
          甚至，各種三角形、梯形的組合形態(tài)都可以隨意拼接，如下所說(shuō)：
          div {
  width: 0;
  height: 0;
  border-top:50px solid red;
  border-left:50px solid transparent;
  border-right:50px solid green;
  border-bottom:50px solid transparent;
}
          div {
  width: 100;
  height: 0;
  border-top:50px solid red;
  border-left:50px solid transparent;
  border-right:50px solid green;
  border-bottom:50px solid transparent;
}
          div {
  width:100;
  height:0;
  border-top:100px solid red;
  border-left:20px solid yellow;
  border-right:20px solid green;
  border-bottom:0px solid transparent;
}
          結(jié)尾
          CSS真是強(qiáng)大啊，感覺(jué)只要技術(shù)夠牛，就可以用CSS畫任意圖形。最后，附上網(wǎng)友用CSS畫的藍(lán)胖子。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲综合在线成人一区|
国产AV天堂无码一区二区三区|
久久er99热精品一区二区|
国产成人免费一区二区三区|
亚洲国产精品综合一区在线|
国产精品一区二区av不卡|
国产精品视频免费一区二区|
午夜福利av无码一区二区|
99久久国产精品免费一区二区|
一区二区三区美女视频|
精品一区二区91|
亚洲欧美日韩国产精品一区|
亚欧在线精品免费观看一区|
午夜福利一区二区三区在线观看|
国产一在线精品一区在线观看|
国产精品亚洲一区二区无码|
欧美激情国产精品视频一区二区
|
人妻体体内射精一区二区|
成人国内精品久久久久一区|
日本精品一区二区久久久|
内射一区二区精品视频在线观看|
卡通动漫中文字幕第一区|
国产免费一区二区三区VR|
日韩高清一区二区三区不卡|
国产成人av一区二区三区在线观看
|
国产大秀视频一区二区三区|
国产一区二区三区小说|
相泽南亚洲一区二区在线播放|
亚洲丶国产丶欧美一区二区三区|
精品人妻无码一区二区三区蜜桃一
|
自慰无码一区二区三区|
国产爆乳无码一区二区麻豆|
无码乱人伦一区二区亚洲一|
久久久国产精品亚洲一区
|
国模无码人体一区二区|
国产主播一区二区|
精品国产伦一区二区三区在线观看|
国产精品一区二区久久|
久久久无码精品人妻一区|
国产在线观看一区二区三区|
亚洲av无码天堂一区二区三区
|