首頁 > web前端 > css教學 > 主體

css3 UI 修飾-回顧

高洛峰
發布: 2017-02-09 16:55:34
原創
1067 人瀏覽過

1.box-shadow 屬性為框添加一個或多個陰影。
  語法: box-shadow: h-shadow v-shadow blur spread color inset
    h-shadow 必須,水平陰影的位置,允許負值。
      v-shadow 必須,垂直陰影的位置,允許負值。
      blur  可選 模糊距離。
      spread 可選,陰影的尺寸。
      color 可選,陰影的顏色。
      inset 可選,將外部陰影(outset) 改為內容步陰影。
  範例:
    
    


          css3 UI 修飾-回顧
    


    
  範例:

    

        background: yellow; box-shadow: 4px 4px 3px #000 inset;}

       

   結果:如圖


    




2.border-radius

css3 UI 修饰——回顾     元素添加圓角邊框。

      語法:border-radius: 1-4 length | % /  1-4 length | %;

      :四個值的順序為右下角,右上角,右上角,右上角,左下角。         border-radius: 2em 1em 4em / 0.5em 3em;          〜     border-top-left-radius: 2em 0.5em;         border-top-right-radius: 1em  3em;   -   -  -bbot-Hbot-6-6-6-Tbot-Tbot-Tbot-Tbot-Tbot-Hbot-6-Tbot-THbot-Hbot-Hbot-6-Tbot-Hbot-Hbot-Hbot-6-B-Tbot-Hbot-色-Hbot-Hbot-Hbot-Hbot-f-色-Tbot-Hbot-色” 。

        
        


      〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〟〜〜〜〜〜〟
3.border-image


  元素邊框背景
  用於設定屬性:
    border-image-source  〠用在邊框的圖片『    border-image-width 圖片邊框的寬度
    border-image-outset 邊框圖像區域超出邊框的量
    border-image-repeat   圖像邊框是否平鋪(repeated)
        鋪滿(rounded )或者拉伸(stretched)默認。
    邊框將border-image 分成了9部分: border-top-image,border-right-image
      border-bottom-image , border-left    border-bottom-image [ -right-image , border-bottom-left-image,
      border-bottom-right-image   位於四個正方向的沒有展示效果,不會平鋪...
  例:   .border_image{width:400px; height :100px;border:1em double orange;border-image:url(1.png) 27;}
    
    

  範例:(平鋪round)
    


  結果:如圖

    css3 UI 修饰——回顾

  

『    .border_image{width:400px; height:100px;border:1em double orange;border-image:url(1.png) 27 repeat;}

    
    


  『
4.
gradient漸變

css3 UI 修饰——回顾   分為linear-gradient(線性漸變) 和radial-gradient (徑向漸變)

    linear-gradientc,c找到〜〜。、、-grada)d 00);        參數: 共三個參數 第一個參數表示為線性漸變的方向,top是從上往下,            left 是從左到右如果定義成left top,那就是從左上角到右下角。             第二個和第三個參數分別是起點顏色和終點顏色。         範例:

          
        


        結果:如圖

          


    radial-gradient 徑向漸變。       漸變的形狀是ellipse(表示橢圓形) farthest-cormer(表示到最遠的角落)

      語法:radial-       

              background:-webkit-radial-gradient🎀   background:-webkit-radial-gradient🀀                red, yellow, green);}

        
        

     

    『

]>結果
        


      範例:ellipse橢圓
              .gradient{width:300px; height: 180px;
            腳              ellipse, red, yellow, green);}                  

          

css3 UI 修饰——回顾       結果:如圖

        css3 UI 修饰——回顾

      範例: 不同尺寸大小關鍵字的使用。
        
        


      結果:如圖🎀『〜 〜 『 〜〜 〜 〜 〜〜 〜 〜 〜〜 〜 〜 〜〜    重複的徑向漸變      repeating-radial-gradient() 函數用於重複徑向漸變

    範例:       範例>css3 UI 修饰——回顾             .gradient{width:300px; height: 180px;

    kit  》、 腳、 腳 ]            gradient(red, yellow 10%, green 15%);}

     ient 15%);}
      styleHy]style


    結果:如圖

      


    進度*    .wrap{width:300px;height:25px;
                        solid #000;}
            .box{width:400px;height:30px;      行    『         linear- gradient(15deg,green 0,

                      green 101,  ,       20px); transition:3s;}css3 UI 修饰——回顾 .wrap:hover .box{ margin-

              left:-100px;; ="wrap">

            


      
       :如圖

      


5

.background-origin


  福 content-box;
        padding -box 背景影像相對於內邊距框來定位。
        border-box   背景影像嫌貴對於
       『content-box 背景影像相對應來定位style>
           .background_origin{width: 300px;height: 150px;border:1px solid black;padding:35px; background-image:url('1.png');      :url('1.png');

                   background-repeat: -repeat     background-repeat: -repeat]ground-position:left; style>css3 UI 修饰——回顾       

    結果:如圖

      

6.background-clip
  規定背景的繪製區域
    值: border-box      〠 被裁減到邊框盒內被裁剪到邊框盒中框
      content-box  背景被裁切到內容框
      no-clip:從border區域向外裁切背景。
    範例:
      


    結果:如圖

   〜〠 〜〠〟網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板