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 国产精品美女久久久久久,国产精品成人观看视频国产,手机国产精品一区二区 

      

        

          



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

          


          
	

          

 

          
  
          
    
          
      
          
        
          一篇文章帶你了解CSS3圓角知識(shí)
          
        
           
          
	
	
          
		
                        
          、瀏覽器支持
          表中的數(shù)字指定完全支持該屬性的第一個(gè)瀏覽器版本。
          數(shù)字后面的 -webkit- 或者 -moz- 使用時(shí)需要指定前綴。
          屬性ChromeFirefoxSafariOperaIEborder-radius5.0 4.0 -webkit-9.04.0 3.0 -moz-5.0 3.1 -webkit-10.5
          二、border-radius 屬性
          1. 創(chuàng)建具有背景圖的圓角
          CSS3中，可以使用border-radius屬性，為元素指定圓角顯示。
          代碼如下：
          <!DOCTYPE html>
    <html>
    <meta charset="UTF-8">
    <title>項(xiàng)目</title>

    <head>
        <style>
            #rcorners1 {
                border-radius: 25px;
                background: #f00;
                padding: 20px;
                width: 200px;
                height: 150px;
            }

            #rcorners2 {
                border-radius: 25px;
                border: 2px solid #73AD21;
                padding: 20px;
                width: 200px;
                height: 150px;
            }

            #rcorners3 {
                border-radius: 25px;
                background: url(img/fy_indexBg.jpg);
                background-position: left top;
                background-repeat: repeat;
                padding: 20px;
                width: 200px;
                height: 150px;
            }
</style>
    </head>

    <body>

        <p>The border-radius property allows you to add rounded corners to elements.</p>
        <p>Rounded corners for an element with a specified background color:</p>
        <!--1.具有指定背景色的圓角元素-->
        <p id="rcorners1">Rounded corners!</p>
        <p>Rounded corners for an element with a border:</p>
        <!--2.帶邊框的圓角元素:-->
        <p id="rcorners2">Rounded corners!</p>
        <!--3.帶背景圖的圓角元素-->
        <p>Rounded corners for an element with a background image:</p>
        <p id="rcorners3">Rounded corners!</p>

    </body>

</html>

          提示:
          border-radius屬性實(shí)際是border-top-left-radius, border-top-right-radius, border-bottom-right-radius 和 border-bottom-left-radius 屬性的簡(jiǎn)寫。
          2. 為每個(gè)角指定弧度
          如果只為border-radius屬性指定一個(gè)值，則此半徑將應(yīng)用于所有4個(gè)角。
          另外可以根據(jù)自己開發(fā)的需求，分別指定每個(gè)角。以下是規(guī)則：
          四個(gè)值: 第一個(gè)值適用于左上角，第二個(gè)值適用于右上方，第三值應(yīng)用于右下角，第四值適用于左下角。
          三個(gè)值: 第一個(gè)值適用于左上，二值適用于右上和左下，右下第三值適用于。
          兩個(gè)值: 第一個(gè)值適用于左上和右下角，和二值適用于右上和左下角。
          一個(gè)值: 所有的四個(gè)角都是圓的。
          實(shí)例1：
          1.四個(gè)值 - border-radius: 15px 50px 30px 5px
          #rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

          2.三個(gè)值 - border-radius: 15px 50px 30px
          #rcorners5 {
    border-radius: 15px 50px 30px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

          3.兩個(gè)值 - border-radius: 15px 50px
          #rcorners6 {
    border-radius: 15px 50px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

          完整代碼 ：
          <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>項(xiàng)目</title>
  <style>
  #rcorners4 {
      border-radius: 15px 50px 30px 5px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }

  #rcorners5 {
      border-radius: 15px 50px 30px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }

  #rcorners6 {
      border-radius: 15px 50px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }
</style>
</head>
<body>

<p>四個(gè)值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>

<p>三個(gè)值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>

<p>兩個(gè)值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>

</body>
</html> 

          實(shí)例2：
          創(chuàng)建橢圓形的圓角
          創(chuàng)建橢圓形的圓角
          橢圓邊框 ：border-radius: 50px/15px
          #rcorners7 {
    border-radius: 50px/15px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

          橢圓邊框 ： border-radius: 15px/50px
          #rcorners8 {
        border-radius: 15px/50px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

          橢圓邊框 ： border-radius: 50%
          #rcorners9 {
        border-radius: 50%;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

          完整代碼：
          <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>項(xiàng)目</title>
  <style>
    #rcorners7 {
        border-radius: 50px/15px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners8 {
        border-radius: 15px/50px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners9 {
        border-radius: 50%;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
</style>
</head>
<body>

  <p>橢圓邊框 - border-radius: 50px/15px:</p>
  <p id="rcorners7"></p>

  <p>橢圓邊框 - border-radius: 15px/50px:</p>
  <p id="rcorners8"></p>

  <p>橢圓邊框 - border-radius: 50%:</p>
  <p id="rcorners9"></p>-->

</body>
</html>

          三、總結(jié)
          1、本文主要講解了CSS3圓角，通過一些屬性的演示，豐富的案例，幫助大家理解CSS知識(shí)。希望大家可以耐心的去學(xué)習(xí)，同時(shí)希望碰到問題主動(dòng)搜索，嘗試一下，總會(huì)有解決方法。
          2、代碼很簡(jiǎn)單，希望能幫到你。
          想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲與數(shù)據(jù)挖掘知識(shí)，可前往專業(yè)網(wǎng)站：http://pdcfighting.com/
          SS3 圓角
          使用 CSS3 border-radius 屬性，你可以給任何元素制作 "圓角"。
          CSS3 圓角制作器
          瀏覽器支持
          表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器的版本號(hào)。
          -webkit- 或 -moz- 前面的數(shù)字表示支持該前綴的第一個(gè)版本。
          屬性
          border-radius9.05.04.0 -webkit-4.03.0 -moz-5.03.1 -webkit-10.5
          CSS3 border-radius 屬性
          使用 CSS3 border-radius 屬性，你可以給任何元素制作 "圓角"。
          以下為三個(gè)實(shí)例：
          1. 指定背景顏色的元素圓角：
          圓角！
          2. 指定邊框的元素圓角:
          圓角！
          3. 指定背景圖片的元素圓角:
          圓角！
          代碼如下:
          實(shí)例
          #rcorners1 {
           border-radius: 25px;
           background: #8AC007;
           padding: 20px; 
           width: 200px;
           height: 150px; 
          }
          #rcorners2 {
           border-radius: 25px;
           border: 2px solid #8AC007;
           padding: 20px; 
           width: 200px;
           height: 150px; 
          }
          #rcorners3 {
           border-radius: 25px;
           background: url(paper.gif);
           background-position: left top;
           background-repeat: repeat;
           padding: 20px; 
           width: 200px;
           height: 150px; 
          }
          CSS3 border-radius - 指定每個(gè)圓角
          如果你在 border-radius 屬性中只指定一個(gè)值，那么將生成 4 個(gè) 圓角。
          但是，如果你要在四個(gè)角上一一指定，可以使用以下規(guī)則：
          • 四個(gè)值: 第一個(gè)值為左上角，第二個(gè)值為右上角，第三個(gè)值為右下角，第四個(gè)值為左下角。
          • 三個(gè)值: 第一個(gè)值為左上角, 第二個(gè)值為右上角和左下角，第三個(gè)值為右下角
          • 兩個(gè)值: 第一個(gè)值為左上角與右下角，第二個(gè)值為右上角與左下角
          • 一個(gè)值： 四個(gè)圓角值相同
          以下為三個(gè)實(shí)例:
          1. 四個(gè)值 - border-radius: 15px 50px 30px 5px:
          2. 三個(gè)值 - border-radius: 15px 50px 30px:
          3. 兩個(gè)值 - border-radius: 15px 50px:
          以下為源代碼:
          實(shí)例
          #rcorners4 {
           border-radius: 15px 50px 30px 5px;
           background: #8AC007;
           padding: 20px; 
           width: 200px;
           height: 150px; 
          }
          #rcorners5 {
           border-radius: 15px 50px 30px;
           background: #8AC007;
           padding: 20px; 
           width: 200px;
           height: 150px; 
          }
          #rcorners6 {
           border-radius: 15px 50px;
           background: #8AC007;
           padding: 20px; 
           width: 200px;
           height: 150px; 
          }
          您還可以創(chuàng)建橢圓邊角:
          實(shí)例
          #rcorners7 {
           border-radius: 50px/15px;
           background: #8AC007;
           padding: 20px; 
           width: 200px;
           height: 150px; 
          }
          #rcorners8 {
           border-radius: 15px/50px;
           background: #8AC007;
           padding: 20px; 
           width: 200px;
           height: 150px; 
          }
          #rcorners9 {
           border-radius: 50%;
           background: #8AC007;
           padding: 20px; 
           width: 200px;
           height: 150px;
          }
          CSS3 圓角屬性
          屬性描述
          border-radius所有四個(gè)邊角 border-*-*-radius 屬性的縮寫
          border-top-left-radius定義了左上角的弧度
          border-top-right-radius定義了右上角的弧度
          border-bottom-right-radius定義了右下角的弧度
          border-bottom-left-radius定義了左下角的弧度
          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
          SS3 transition動(dòng)畫
          1、transition-property 設(shè)置過渡的屬性，比如：width height background-color
          2、transition-duration 設(shè)置過渡的時(shí)間，比如：1s 500ms
          3、transition-timing-function 設(shè)置過渡的運(yùn)動(dòng)方式，常用有 linear(勻速)|ease(緩沖運(yùn)動(dòng))
          4、transition-delay 設(shè)置動(dòng)畫的延遲
          5、transition: property duration timing-function delay 同時(shí)設(shè)置四個(gè)屬性
          綜合練習(xí)：
          制作鼠標(biāo)移入圖片時(shí)，圖片說明滑入的效果
          CSS3 transform變換
          1、translate(x,y) 設(shè)置盒子位移
          2、scale(x,y) 設(shè)置盒子縮放
          3、rotate(deg) 設(shè)置盒子旋轉(zhuǎn)
          4、skew(x-angle,y-angle) 設(shè)置盒子斜切
          5、perspective 設(shè)置透視距離
          6、transform-style flat | preserve-3d 設(shè)置盒子是否按3d空間顯示
          7、translateX、translateY、translateZ 設(shè)置三維移動(dòng)
          8、rotateX、rotateY、rotateZ 設(shè)置三維旋轉(zhuǎn)
          9、scaleX、scaleY、scaleZ 設(shè)置三維縮放
          10、tranform-origin 設(shè)置變形的中心點(diǎn)
          11、backface-visibility 設(shè)置盒子背面是否可見
          舉例：（翻面效果）
          <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>翻面</title>
 <style type="text/css">
 .box{
 width:300px;
 height:272px;
 margin:50px auto 0;
 transform-style:preserve-3d;
 position:relative; 
 }
 .box .pic{
 width:300px;
 height:272px;
 position:absolute;
 background-color:cyan;
 left:0;
 top:0;
 transform:perspective(800px) rotateY(0deg);
 backface-visibility:hidden;
 transition:all 500ms ease;
 }
 .box .back_info{
 width:300px;
 height:272px;
 text-align:center;
 line-height:272px;
 background-color:gold;
 position:absolute;
 left:0;
 top:0;
 transform:rotateY(180deg);
 backface-visibility:hidden;
 transition:all 500ms ease; 
 }
 .box:hover .pic{
 transform:perspective(800px) rotateY(180deg);
 }
 .box:hover .back_info{
 transform:perspective(800px) rotateY(0deg);
 }
 </style>
</head>
<body>
 <div class="box"> 
 <div class="pic"><img src="images/location_bg.jpg"></div>
 <div class="back_info">背面文字說明</div>
 </div>
</body>
</html>

          CSS3 animation動(dòng)畫
          1、@keyframes 定義關(guān)鍵幀動(dòng)畫
          2、animation-name 動(dòng)畫名稱
          3、animation-duration 動(dòng)畫時(shí)間
          4、animation-timing-function 動(dòng)畫曲線 linear(勻速)|ease(緩沖)|steps(步數(shù))
          5、animation-delay 動(dòng)畫延遲
          6、animation-iteration-count 動(dòng)畫播放次數(shù) n|infinite
          7、animation-direction 動(dòng)畫結(jié)束后是否反向還原 normal|alternate
          8、animation-play-state 動(dòng)畫狀態(tài) paused(停止)|running(運(yùn)動(dòng))
          9、animation-fill-mode 動(dòng)畫前后的狀態(tài) none(缺省)|forwards(結(jié)束時(shí)停留在最后一幀)|backwards(開始時(shí)停留在定義的開始幀)|both(前后都應(yīng)用)
          10、animation:name duration timing-function delay iteration-count direction;同時(shí)設(shè)置多個(gè)屬性
          理解練習(xí)：
          1、風(fēng)車動(dòng)畫
          2、loading動(dòng)畫
          3、人物走路動(dòng)畫
          <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>走路動(dòng)畫</title>
 <style type="text/css"> 
 .box{
 width:120px;
 height:180px;
 border:1px solid #ccc; 
 margin:50px auto 0;
 position:relative;
 overflow:hidden; 
 }
 .box img{
 display:block;
 width:960px;
 height:182px;
 position: absolute;
 left:0;
 top:0;
 animation:walking 1.0s steps(8) infinite; 
 }
 @keyframes walking{
 from{
 left:0px;
 }
 to{
 left:-960px;
 }
 }
 </style>
</head>
<body>
 <div class="box"><img src="images/walking.png"></div>
</body>
</html>

          動(dòng)畫中使用的圖片如下：
          CSS3圓角、rgba
          CSS3圓角
          設(shè)置某一個(gè)角的圓角，比如設(shè)置左上角的圓角：
          border-top-left-radius:30px 60px;
          同時(shí)分別設(shè)置四個(gè)角： border-radius:30px 60px 120px 150px;
          設(shè)置四個(gè)圓角相同：
          border-radius:50%;
          rgba（新的顏色值表示法）
          1、盒子透明度表示法：
           .box
 {
 opacity:0.1;
 /* 兼容IE */
 filter:alpha(opacity=10); 
 }

          2、rgba(0,0,0,0.1) 前三個(gè)數(shù)值表示顏色，第四個(gè)數(shù)值表示顏色的透明度
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
一区二区三区在线观看中文字幕
|
亚洲欧美国产国产综合一区|
日韩精品中文字幕无码一区|
国产乱码精品一区三上|
国产福利一区二区三区在线视频|
中文字幕一区二区日产乱码|
国产一区二区三区在线观看免费|
亚洲一区二区影视|
日韩人妻不卡一区二区三区|
三上悠亚一区二区观看|
国产传媒一区二区三区呀|
无码丰满熟妇浪潮一区二区AV|
精品亚洲AV无码一区二区|
午夜福利一区二区三区在线观看|
国产亚洲日韩一区二区三区|
久久99国产一区二区三区|
国产激情无码一区二区三区|
一区二区免费在线观看|
免费一区二区三区在线视频|
日韩一区二区三区视频|
精品视频在线观看一区二区三区|
在线成人综合色一区|
日韩高清一区二区三区不卡|
波多野结衣一区二区三区高清在线|
国模吧一区二区三区精品视频|
无码人妻aⅴ一区二区三区有奶水|
成人中文字幕一区二区三区|
亚洲一区二区三区不卡在线播放
|
日本v片免费一区二区三区
|
一区二区三区免费视频观看|
日本视频一区在线观看免费
|
亚洲AV成人一区二区三区观看|
亚洲av无码一区二区三区天堂古代|
亚洲国产av一区二区三区丶|
国产乱码精品一区二区三区四川人
|
日韩一区二区三区电影在线观看|
日韩一区二区三区射精|
国产乱子伦一区二区三区|
国产产一区二区三区久久毛片国语|
一区二区三区伦理高清|
精品一区二区在线观看|