CSS3樣式中新添加的屬性_ZenDei技術網路在線

CSS3樣式中新添加的屬性

-Advertisement-

border-radius：允許向元素添加圓角 box-shadow：陰影設置多層陰影 box-shadow:10px 10px 5px 5px gray,15px 15px 5px 5px blue,20px 20px 5px 5px gray;/* 多層陰影*/ border-image屬性用 ...

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內陰影*/
        }
        
    </style>
  </head>
  
  <body>
      <div id="div1">
           外陰影
   </div>
   <div id="div2">
           內陰影
   </div>
  </body>

設置多層陰影

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

border-image屬性用於設置圖片邊框

<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瀏覽器內核支持所需要 ,round是平鋪的意思*/
            -o-border-image:url("img/1.jpg")30 30 round;/* -o是Opera瀏覽器內核支持所需要的首碼*/
            border-image:url("img/1.jpg")30 30 round;
        }
        #stretch{
            -webkit-border-image:url("img/1.jpg") 30 30 stretch; /* -webkit是google瀏覽器內核支持所需要 stretch是拉伸 */
            -o-border-image:url("img/1.jpg")30 30 stretch;/* -o是Opera瀏覽器內核支持所需要的首碼*/
            border-image:url("img/1.jpg")30 30 stretch;
        }
        
    </style>
  </head>
  
  <body>
      <p>border-image屬性用於設置圖片的邊框</p>
      <div id="round">
          這裡圖像平鋪來填充該區域
      </div>
      <br>
      <div id="stretch">
          這裡圖片拉伸以填充該區域
      </div>
      <p>這裡是我們使用的圖片素材</p>
      <img src="img/1.jpg">

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Angular2 Hello World 之 2.0

最近angular2正式版發佈了，現在就趁熱接著記錄一下2.0版的Hello World。據說由RC6升級到2.0代碼改動不是很大，在寫的時候也感覺改動不是很大，這次記錄還是以asp.net core 空項目模板為基礎，本著在此基礎上添加最少的代碼來實現Hello World，沒用的代碼全部清掉（用 ...
百度地圖API

百度地圖API 百度地圖API當然在官方文檔學習更加清晰，我只是做一下我這2天研究一個總結。首先，應該在上面的鏈接申請一個你的密鑰。接著，顯示百度地圖，先上代碼再解釋：創建地圖實例這裡通過new 創建一個地圖實例，其中參數可以是id也可以是元素對象,用於在頁面上展現地圖，所以給html元素設 ...
ES5概述（ECMAScript262/5.1）

ES5概述（ECMAScript262/5.1）本文參考： "ES5概述" ECMAScript 是基於對象的：基本語言和宿主設施都由對象提供，ECMAScript 程式是一組可通信的對象。ECMAScript 對象是屬性的集合，每個屬性有零個或多個特性，以及屬性的使用方式。例如，當設置一個屬 ...
VUE2.0不可忽視的很多變化

今天使用webpack-sample初始一個vue-cli項目，在app.vue文件中添加了個鉤子函數ready，可是ready內的事件一直不執行，檢查了webpack文件和package.json也沒發現什麼問題，瀏覽器也沒報錯或者提示，很令人捉急。然後去github看了webpack-simpl ...
普通函數和構造函數的區別

在命名規則上，構造函數一般是首字母大寫，普通函數遵照小駝峰式命名法。在函數調用的時候： function fn() { } 構造函數：1. new fn( ) 2 .構造函數內部會創建一個新的對象，即f的實例 3. 函數內部的this指向新創建的f的實例 4. 預設的返回值是f的實例普通函數： ...
JavaScript 的 defer 與 async

當解析器遇到 script 標簽時，文檔的解析將停止，並立即下載並執行腳本，腳本執行完畢後將繼續解析文檔。但是我們可以將腳本標記為 defer，這樣就不會停止文檔解析，等到文檔解析完成才執行腳本，也可以將腳本標記為 async，以便由其他線程對腳本進行解析和執行。 <! more 三者之間的區別？ ...
超全的web開發工具和資源

作為Web開發者，這是好的時代，也是壞的時代。Web開發技術也在不斷變化。雖然很令人興奮，但是這也意味著Web開發人員需要要積極主動的學習新技術和新的編程語言，並願意和渴望接受新的挑戰，以適應變化。新的挑戰可能會包括一些開發上的要求，如利用適應現有的框架來滿足業務需求。測試一個網站，能從中知道出了哪 ...
關於js原型的面試題

今天遇到關於javascript原型的一道面試題，現分析下：原題如下： function A(){ } function B(a){ this.a = a; } function C(a){ if(a){ this.a = a; } } A.prototype.a = 1; B.prototype ...