CSS3樣式中新添加的屬性

2016/9/28 8:25:20 閱讀：1537 發(fā)布者：1537

border-radius：允許向元素添加圓角

<style type="text/css"> 
        #r1{ 
            border-radius:25px; 
            background:blue; 
            padding:20px; 
            width:200px; 
            height:150px; 
        } 
        #r2{ 
            border-radius:25px; 
            border:2px solid green; 
            padding:20px; 
            width:200px; 
            height:150px; 
        } 
        #r3{ 
            border-radius:25px; 
            background:url("img/1.jpg"); 
            background-position:left top; 
            background-repeat:repeat; 
            padding:20px; 
            width:200px; 
            height:150px; 
        } 
         
    </style> 
  </head> 
   
  <body> 
   
   <form action="" id="myform"  > 
           <p>border-radius </p> 
           <p>指定背景顏色圓角</p> 
           <p id="r1">圓角</p> 
           <p>指定邊框元素圓角</p> 
           <p id="r2">圓角</p> 
           <p>指定背景圖片圓角</p> 
           <p id="r3">圓角</p> 
   </form> 
  </body>

box-shadow：陰影

<style type="text/css"> 
        #div1{ 
            width:200px; 
            height:100px; 
            background:yellow; 
            box-shadow:10px 10px 5px 5px gray;/* 陰影*/ 
        } 
        #div2{ 
            width:200px; 
            height:100px; 
            background:yellow; 
            box-shadow:10px 10px 5px 5px inset;/* 陰影 inset內(nèi)陰影*/ 
        } 
         
    </style> 
  </head> 
   
  <body> 
      <div id="div1"> 
           外陰影 
   </div> 
   <div id="div2"> 
           內(nèi)陰影 
   </div> 
  </body>

設(shè)置多層陰影

box-shadow:10px 10px 5px 5px gray,15px 15px 5px 5px blue,20px 20px 5px 5px gray;/* 多層陰影*/

border-image屬性用于設(shè)置圖片邊框

<style type="text/css"> 
        div{ 
            width:250px; 
            padding:10px 20px; 
            border:15px solid transparent; 
        } 
        #round{ 
            -webkit-border-image:url("img/1.jpg") 30 30 round;  
/* -webkit是google瀏覽器內(nèi)核支持所需要 ,round是平鋪的意思*/ 
            -o-border-image:url("img/1.jpg")30 30 round;/* -o是Opera瀏覽器內(nèi)核支持所需要的前綴*/ 
            border-image:url("img/1.jpg")30 30 round; 
        } 
        #stretch{ 
            -webkit-border-image:url("img/1.jpg") 30 30 stretch;  
/* -webkit是google瀏覽器內(nèi)核支持所需要 stretch是拉伸 */ 
            -o-border-image:url("img/1.jpg")30 30 stretch; 
/* -o是Opera瀏覽器內(nèi)核支持所需要的前綴*/ 
            border-image:url("img/1.jpg")30 30 stretch; 
        } 
         
    </style> 
  </head> 
   
  <body> 
      <p>border-image屬性用于設(shè)置圖片的邊框</p> 
      <div id="round"> 
          這里圖像平鋪來填充該區(qū)域 
      </div> 
      <br> 
      <div id="stretch"> 
          這里圖片拉伸以填充該區(qū)域 
      </div> 
      <p>這里是我們使用的圖片素材</p> 
      <img src="img/1.jpg">

文字加倒影：

p{ 
            font-size:36px; 
            -webkit-box-reflect:below -10px; 
            -webkit-linear-gradient:(top,transparent 50%,#FFFFFF); 
/* 瀏覽器可能不支持*/ 
         
        }

自定義字體：

    @font-face{ 
            font-family:myfristFont;/* 添加的字體名字*/ 
            src:url(’Scansation_Light.ttf’); 
        } 
        div{ 
            font-family:myfirstFont; 
            font-weight:bold; 
        }

英文單詞過長時換行

.text1{ 
            width:11em; 
            border:1px solid green; 
        } 
        .text2{ 
            width:11em; 
            border:1px solid yellw; 
            word-wrap:break-word;/* 對過長單詞且超過邊框的進行換行 */ 
        }

文字過長的省略方式

    div{ 
            white-space:nowrap;/*一行顯示*/ 
            width:12em; 
            overflow:hidden; 
            border:1px solid green; 
        } 
        .div1{ 
            text-overflow:ellipsis;/*超出部分以省略號顯示，以單詞為界限*/ 
        } 
        .div2{ 
            text-overflow:clip;/* 直接截斷*/ 
        }

scale進行縮放和增大

div{ 
            width:100px; 
            height:75px; 
            background:green; 
        } 
         
         
        .div1{ 
            margin:100px; 
            transform:scale(2,4); 
            -ms-transform:scale(2,4); 
            -webkit-transform:scale(2,4); 
        }

skew傾斜：

div{ 
            width:100px; 
            height:100px; 
            margin:100px; 
            background:blue; 
        } 
         
         
        .div2{ 
            margin:100px; 
            transform:skew(30deg,20deg);/*水平方向偏轉(zhuǎn)   垂直方向偏轉(zhuǎn)*/ 
            -ms-transform:skew(30deg,20deg); 
            -webkit-transform:skew(30deg,20deg); 
        }

rotate旋轉(zhuǎn)

div{ 
            width:100px; 
            height:100px; 
            border:1px solid red; 
            background:blue; 
        } 
         
         
        .div2{ 
            float:left;
　　　　　　　transform-origin:10px 10px;/*設(shè)置旋轉(zhuǎn)的與圓心點也可以是 top left*/ 
            transform:rotate(20deg); 
            -ms-transform:rotate(20deg); 
            -webkit-transform:rotate(20deg); 
        }

移動translate；使用此樣式進行移動并不會影響別的元素

    div{ 
            width:100px; 
            height:100px; 
            border:1px solid red; 
            background:blue; 
        } 
         
         
        .div2{ 
            transform:translate(50px,100px); 
            -ms-transform:translate(50px,100px); 
            -webkit-transform:translate(50px,100px); 
        }

3D旋轉(zhuǎn)

div{ 
            width:100px; 
            height:100px; 
            border:1px solid red; 
            background:blue; 
        } 
         
        .div1{ 
            transform:rotateX(120deg); 
            -ms-transform:rotateX(120deg); 
            -webkit-transform:rotateX(120deg); 
             
            transform:rotateY(120deg); 
            -ms-transform:rotateY(120deg); 
            -webkit-transform:rotateY(120deg); 
             
            transform:rotateZ(120deg); 
            -ms-transform:rotateZ(120deg); 
            -webkit-transform:rotateZ(120deg); 
        } 
        .div2{ 
            transform:rotateY(120deg); 
            -ms-transform:rotateY(120deg); 
            -webkit-transform:rotateY(120deg); 
        } 
        .div3{ 
            transform:rotateZ(120deg); 
            -ms-transform:rotateZ(120deg); 
            -webkit-transform:rotateZ(120deg); 
        }

過渡屬性

div{ 
            width:200px; 
            height:200px; 
            border:1px solid red; 
            background:blue; 
            transition:width 2s,background 2s;/* 過渡的屬性與時間*/ 
            -ms-transition:width 2s,background 2s; 
            -webkit-transition:width 2s,background 2s; 
        } 
        div:hover{ 
            width:600px; 
            background:yellow; 
        }

過渡屬性

div{ 
            width:200px; 
            height:200px; 
            border:1px solid red; 
            background:blue; 
        } 
        .div1{ 
            transition-property:width;/* 過渡屬性*/ 
            transition-duration:1s; 
            transition-timing-function:linear;/*過渡的過程中速度是一樣的*/ 
            transition-delay:0s; 
             
            -webkit-transition-property:width;/* 過渡屬性*/ 
            -webkit-transition-duration:1s; 
            -webkit-transition-timing-function:linear;/*過渡的過程中速度是一樣的*/ 
            -webkit-transition-delay:0s; 
        } 
        .div2{ 
            transition:width 1s linear 0s;/* 過渡的屬性與時間*/ 
            -ms-transition:width 1s linear 0s; 
            -webkit-transition:width 1s ease 0s; 
        } 
         
        div:hover{ 
            width:300px; 
            bcakground:red; 
        }

多列布局

div{ 
            -moz-column-count:3; 
            -webkit-column-count:3; 
            column-count:3; 
        }

多列布局間距

div{ 
            -moz-column-count:3; 
            -webkit-column-count:3; 
            column-count:3; 
            -moz-column-gap:40px;/*設(shè)置間隔*/ 
            -webkit-column-gap:40px; 
            column-gap:40px; 
        }

多列布局添加分隔欄

div{ 
            -moz-column-count:3; 
            -webkit-column-count:3; 
            column-count:3; 
            -moz-column-rule:4px dotted blue ;/*
設(shè)置寬度 樣式(dotted/outset) 顏色*/ 
            -webkit-column-rule:4px dotted blue; 
            column-rule:4px dotted blue; 
        }

創(chuàng)建動畫

div{ 
            width:200px; 
            height:200px; 
            background:yellow; 
            animation:myfrist 5s;/*引入創(chuàng)建的關(guān)鍵幀 和播放時間*/ 
            -webkit-animation:myfrist 5s; 
        } 
        @keyframes myfrist{/*創(chuàng)建一個關(guān)鍵幀 從什么到什么*/ 
            from{background:#ffff00;} 
            to{background:red;} 
        } 
        @-webkit-keyframes myfrist{ 
            from{background:#ffff00;} 
            to{background:red;} 
        }

創(chuàng)建動畫2

div{ 
            width:200px; 
            height:200px; 
            background:yellow; 
            position:relative; 
            margin-left:0px; 
            animation:myfrist 5s;/*引入創(chuàng)建的關(guān)鍵幀 和播放時間*/ 
            -webkit-animation:myfrist 5s; 
        } 
        @keyframes myfrist{/*創(chuàng)建一個關(guān)鍵幀 從什么到什么*/ 
            0%{ 
                background:red; 
                left:200px; 
                top:0px; 
            } 
            25%{ 
                background:yellow; 
                left:200px; 
                top:0px; 
            } 
            50%{ 
                background:blue; 
                left:200px; 
                top:200px; 
            } 
            75%{ 
                background:green; 
                left:0px; 
                top:200px; 
            } 
            100%{ 
                background:red; 
                left:0px; 
                top:0px; 
            } 
        } 
        @-webkit-keyframes myfrist{ 
            0%{ 
                background:red; 
                left:200px; 
                top:0px; 
            } 
            25%{ 
                background:yellow; 
                left:200px; 
                top:0px; 
            } 
            50%{ 
                background:blue; 
                left:200px; 
                top:200px; 
            } 
            75%{ 
                background:green; 
                left:0px; 
                top:200px; 
            } 
            100%{ 
                background:red; 
                left:0px; 
                top:0px; 
            } 
        }

上一篇 div+css里的定位問題

下一篇關(guān)于css3的背景漸變

【微信掃一掃】

亚洲无码Aⅴ,视频1页精品,欧美系列一区二区,曰韩色999

CSS3樣式中新添加的屬性

文章分類

相關(guān)新聞

熱門標簽