文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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

html與CSS如何實現圓形和圓角圖片格式的範例程式碼

黄舟

發布： 2017-07-22 09:50:38

原創

2645 人瀏覽過

效果顯示

#實作程式碼

<<!DOCTYPE html><html><head>
    <title>JcMan</title>
    <style type="text/css">

    .image1{ 
        margin-top: 100px; 
        width:200px; 
        height:200px; 
        border-radius:200px; 
    }

    .image2{        margin-top: 100px; 
        width:200px; 
        height:200px; 
        border-radius:20px; 
    }
    </style>
    </head>
    <body>
    <center>
    <img class="image1" src="http://b.hiphotos.baidu.com/image/pic/item/b999a9014c086e069cd7964b00087bf40ad1cbb7.jpg"/>
    <img class="image2" src="http://b.hiphotos.baidu.com/image/pic/item/b999a9014c086e069cd7964b00087bf40ad1cbb7.jpg"/> 
    </center>
    </body>
    </html>

登入後複製

以上是html與CSS如何實現圓形和圓角圖片格式的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：

css html

來源：php.cn

上一篇：關於html中空格的問題解決下一篇：html中如何嵌入特殊字體中文以及英文的實例

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章