<output id="jbxdv"></output>

      1. 如何在網頁設計中設計圓角圖片

        • 2019-10-15 15:58:07
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        網頁設計時,頁面中圓角的實現一直是個很難解決的問題,雖然現在有很多種實現方法,但都是比較麻煩的,這里想通過此例介紹一種CSS新技術,即CSS新的屬性border-radius來實現網頁設計中的圖片的圓角化。

        【操作步驟】

        第1步,啟動Dreamweaver,新建文檔,保存為index.html。

        第2步,首先構建網頁結構,網頁結構非常簡單,就是在網頁添加了4張圖片。

        <img class="a" src="images/1.jpg"/>

        <img class="a" src="images/2.jpg"/>

        <img class="a" src="images/3.jpg"/>

        <img class="a" src="images/4.jpg"/>

        第3步,定義網頁的基本屬性。

        body {    margin: 20px;    padding: 20px;}

        在以上的代碼中設置了網頁四周的補白為20px,用padding了網頁的內邊距為20px,設置為居中。

        第4步,運用border-radius屬性設置圓角圖片。

        .a {    

        width: 150px;    

        height: 150px;    

        border: 1px solid gray;    

        -moz-border-radius: 10px;      /*僅Firefox支持,實現圓角效果*/    

        -webkit-border-radius: 10px;   /*僅Safari,Chrome支持,實現圓角效果*/    

        -khtml-border-radius: 10px;    /*僅Safari,Chrome支持,實現圓角效果*/    

        border-radius: 10px;           /*Firefox,Opera,Safari,Chrome支持,實現圓角效果*/}

        在以上代碼中,首先定義了圖片的寬度和高度,接著設置了圖片的邊框樣式,然后用border-radius定義了圖片的圓角。

        提示:border-radius屬性的作用分別如下。   

        ?最多可以設置4個值,分別是矩形4個圓角的半徑,如border-radius:10px,表示4個角都為圓角,且每個圓角的半徑都為10px。   

        ?也可以設置兩個值,如border-ra-dius:10px 5px,第1個值代表左上圓角和右下圓角,第2個值代表右上圓角和左下圓角。   

        ?如果設置3個值,如border-radius:10px5px 1px,第1個值代表左上圓角,第2個值代表右上圓角和左下圓角,第3個值代表右下圓角。   上圓角、右上圓角、右下圓角和左下圓角。   

        ?也可以將4個角拆分成4個單獨的屬性來設置:左上圓角:border-top-left-radius、右上圓角:border-top-right-radius,右下圓角:border-bottom-right-radius,左下圓角:border-bottom-left-radius。如IE8及其以下版本瀏覽器就不能支持這種技術,所以在使用它的時候還要考慮到瀏覽器的兼容問題。

        ?如果設置了4個值,如border-ra-dius:10px 9px 8px 7px,4個值分別代表左上圓角、右上圓角、右下圓角和左下圓角。   

        ?也可以將4個角拆分成4個單獨的屬性來設置:左上圓角:border-top-left-radius、右上圓角:border-top-right-radius,右下圓角:border-bottom-right-radius,左下圓角:border-bottom-left-radius。如IE8及其以下版本瀏覽器就不能支持這種技術,所以在網頁設計的時候還要考慮到瀏覽器的兼容問題。

        當前文章標題:如何在網頁設計中設計圓角圖片

        當前URL:http://www.freenetsites.com/news/wzzz/3109.html

        上一篇:網頁設計中的陰影圖片

        下一篇:在網頁設計中的圓角欄目

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>