css3新UI

zxc123e發表於2015-10-31
CSSS3UI

圓角

  • border-radius: 1-4個數/1-4個數

前面表示水平半徑，後面表示垂直半徑（橢圓）
不給“/”則水平半徑和垂直半徑一樣（圓）

  • 引數

各種長度單位都可以：px, %,…
%有時很方便，%表示半徑佔元素寬或高的百分比
例項：

<style type="text/css">
    .box {width: 400px; height: 400px; margin: 50px auto; border: 1px solid #000; transition:3s linear;}
    .box div {width: 180px; height: 180px; border: 1px solid #000; margin: 10px; box-sizing: border-box;
        float: left; background: url(./yellow.jpg);}
    .box div:nth-of-type(1),.box div:nth-of-type(4){border-radius: 0px 60%}
    .box div:nth-of-type(2),.box div:nth-of-type(3){border-radius: 60% 0px;}
    .box:hover {-webkit-transform:rotate(360deg);}
</style>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

邊框

  • 邊框圖片 border-image: url() 上下尺寸 左右尺寸

border-image-sourceg 引入圖片
border-image-slice 切割圖片
border-image-width 邊框寬度
border-image-repeat 圖片的排列方式
round 平鋪，repeat重複， stretch拉伸

  • 邊框顏色 border-color

線性漸變

linear-gradient([<起點||角度>]？<點>，<點>…)
只能用在背景上
- IE
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=”#ffffff”,endColorstr=”#ff0000”,GradientType=”1”);
引數
- 起點：從什麼方向開始漸變（預設從上到下）
》left、left、left top
- 角度：從什麼角度開始漸變
- 點：漸變點的顏色和位置
》black 50% 

linear-gradient(left top,red,green)
linear-gradient(left top,red,green)
linear-gradient(left top,red 0,green 100px)
linear-gradient(left top,red 0,green 50%)
/*同一位置直接跳變*/
linear-gradient(left top,red 0,green 50%)
/*加入背景圖片*/
background:-webkit-linear-gradient(top rgba(255,255,255,1) 30%, rgba(255,255,255,0)),url(tupian.gif);

repeating-linear-gradient 漸變重複

徑向漸變

radial-gradient([<起點>]？[<形狀>||<大小>,]?<點>，<點>…)
- 起點：可以是關鍵字（left,top,rigth,bottom）,具體數值或百分比
- 形狀：eclipse、 circle
- 大小：具體數值或百分比，也可以是關鍵字（最近端，最近角，最遠角，包含或覆蓋（closest-side,closest-corner, farthest-side,farthest-corner, contain or cover））;
- 注：firefox目前只支援關鍵字

背景

多背景
逗號分開
- background:url(a.pg) 0 0, url(b.jpg) 0 10%;
背景尺寸background-size:x y

  • background-size:100% 100%
  • cover 鋪滿，可能會超出
  • contatin 圖片完全顯示，不一定鋪滿

background-origin:border | padding | content

  • border-box：從border區域開始顯示背景。
  • padding-box：從padding區域開始顯示背景
  • content-box : 從content區域開始顯示背景

background-clip

  • border：從border區域向外裁剪背景
  • padding：從padding區域向外裁剪背景
  • content：從content區域向外裁剪背景
  • no-clip：從border區域向外裁剪背景
  • webkit核心瀏覽器實現了text：在文字的區域剪下背景

這裡寫圖片描述
背景裁剪結合線性漸變做的一個例子

<style type="text/css">
    body{background: #000; text-align: center;font: 50px/200px "微軟雅黑"; }

    h1{ display: inline-block; color: rgba(255,255,255,0.4); background:  -webkit-linear-gradient(-30deg, rgba(255,255,255, 0) 120px, rgba(255,255,255, 1) 180px, rgba(255,255,255,1) 220px, rgba(255,255,255,0) 280px) no-repeat -300px 0px;-webkit-background-clip:text;}
</style>
</head> 
<body>
    <h1>向右滑動</h1>
    <script type="text/javascript">
        var oTimer = null;
        var iLeft = -300;
        var oH1 = document.getElementsByTagName("h1")[0];
        function moverTo()
        {
            oTimer=setInterval(function(){
                iLeft += 10;
                oH1.style.backgroundPosition = iLeft+"px 0px";
                if (iLeft == 500) {
                    iLeft = -300;
                    clearInterval(oTimer);
                }
            }, 10);
        } 
        setInterval(function(){
            moverTo();
        },3000);
        // moverTo();
    </script>
</body>

遮罩

兩張圖片，一張作為遮罩，另一張按照遮罩的形狀顯示（有畫素的地方就顯示）。
mask-image
mask-position
mask-repeat

相關文章