css3神奇的圓角邊框、陰影框及其圖片邊框

-Advertisement-

css3圓角，建議IE10以上如果border-radius 單位是百分比，則參考為自身寬高，因此當寬高不一致時，圓角為不規則形狀如果border-radius 為50%，則為橢圓；當寬高一致時，則為正圓單獨設置每個圓角：四個值： border-radius：左上角右上角右下角左下角 ...

css3圓角，建議IE10以上

如果border-radius 單位是百分比，則參考為自身寬高，因此當寬高不一致時，圓角為不規則形狀

如果border-radius 為50%，則為橢圓；當寬高一致時，則為正圓

單獨設置每個圓角：

四個值： border-radius：左上角右上角右下角左下角

三個值： border-radius：左上角右上角+左下角 右下角

兩個值： border-radius：左上角+右下角 右上角+左下角

相容瀏覽器首碼

谷歌 -webkit-

火狐 -moz-

IE -ms-

歐朋 -o-

氣泡對話框

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width:500px;
        height:300px;
        border:1px solid #000;
        position: relative;
        font-size:24px;
        line-height: 300px;
        text-align:center;
        -webkit-border-radius:50%;
           -moz-border-radius:50%;
            -ms-border-radius:50%;
             -o-border-radius:50%;
                border-radius:50%;
    }
    div::before,
    div::after{
        content:'';
        display: block;
        position: absolute;
        border:1px solid #000;
        -webkit-border-radius:50%;
           -moz-border-radius:50%;
            -ms-border-radius:50%;
             -o-border-radius:50%;
                border-radius:50%;
    }
    div::before{
        width:50px;
        height:50px;
        right:50px;
        bottom:-25px;
    }
    div::after{
        width:30px;
        height:30px;
        right:25px;
        bottom:-50px;
    }
</style>
</head>
<body>
    <div>這是一段氣泡對話框</div>
</body>
</html>

box-shadow:水平偏移垂直偏移模糊擴展顏色位置

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 300px;
        height: 200px;
        background-color: #f0f;
        margin:0 auto;
        box-shadow:10px 10px 5px 0 #bbb;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

border-image 歐朋瀏覽器和IE瀏覽器不相容

首先準備border.png

演示效果1：

圖片鋪滿整個邊框

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 300px;
        height: 200px;
        background-color: #f0f;
        margin:0 auto;
        border:30px solid black;
        border-image:url(source/border.png) 30 30 round;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

演示效果2：

圖片被拉伸來鋪滿邊框

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 300px;
        height: 200px;
        background-color: #f0f;
        margin:0 auto;
        border:30px solid black;
        border-image:url(source/border.png) 30 30 stretch;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

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

-Advertisement-

更多相關文章

基於雲開發開發 Web 應用（二）：界面 UI 開發

在這一篇文章，我們可以開始使用 Vuetify 來實現 Web 應用的構建。這一篇內容沒有那麼多，更多討論的是 UI 和 UX 介紹。 ...
node post 大數據無響應超時

使用 express 框架，post 較大數據量（富文本，裡面包含了圖片base64數據，大約300k）時，node 無響應，把數據內容減少後能順利提交。是因為數據量大過body post 的限制導致不能提交。請通過以下語句修改body post 數據大小限制，使數據能夠提交。 var body ...
CSS3中新增的對文本和字體的設置

文字陰影 text-shadow: 水平偏移垂直偏移模糊顏色相容性：IE10+ <!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</ ...
學習vue

今天把以前學過的vue複習了一遍，覺得當時學的不怎麼樣。所以就好好複習了基礎知識，都是些非常基礎的vue知識點 "代碼我放在GitHub 上了" "如果訪問不了訪問這個" o( ￣▽￣ )ブ
3分鐘接入socket.io使用

傳統的客戶端和伺服器通信協議是HTTP：客戶端發起請求，服務端進行響應，服務端從不主動勾搭客戶端。這種模式有個明顯軟肋，就是同步狀態。而實際應用中有大量需要客戶端和伺服器實時同步狀態的場景，比如聊天室、股票行情、線上共用文檔等都需要客戶端實時拿到伺服器的最新狀態。socket.io 是一個類庫，內部... ...
短網址生成和還原工具使用教程

功能簡介：這款工具支持一鍵生成新浪(t.cn)、騰訊(url.cn)、微信(w.url.cn)等各種短網址，同時會生成短鏈接二維碼(可直接下載保存)。生成的結果可用於社交媒體、個人簽名、網路營銷、線下推廣等其他場合。另外，工具還提供了通過短網址反查原URL的功能。可將我們輸入的短網址還原成真實的網址 ...
css3神奇的背景控制屬性+使用顏色過渡實現漂亮的漸變效果

css3背景圖像相關相容性：IE9+ background-clip 背景圖片繪製區域 background-clip:border-box; 內容區 <!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta c ...
釘釘開放與商業化團隊前端大量招人

跪求前端急缺前端！急缺前端！急缺前端！阿裡巴巴常規福利（13 薪、3 6 月年終獎、7 天以上帶薪年假等）釘釘期權，釘釘相對於阿裡集團，有自己獨立的期權，想象空間大團隊妹子多，妹子多的團隊有時候也是個煩惱啊^_^ 歡迎發簡歷，合適就直接走內推環節，全程一對一溝通~ 也可直接私信，定期回覆 ...