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

時間 2020-02-04

標籤 css3 css 神奇圓角邊框陰影及其圖片欄目 CSS 简体版

原文原文鏈接

css3圓角，建議IE10以上css

若是border-radius 單位是百分比，則參考爲自身寬高，所以當寬高不一致時，圓角爲不規則形狀html

若是border-radius 爲50%，則爲橢圓；當寬高一致時，則爲正圓css3

單獨設置每一個圓角：web

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

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

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

兼容瀏覽器前綴code

谷歌 -webkit-htm

火狐 -moz-blog

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。