亚洲风情内射推销员,一米八五插一米六可以吗

技術(shù)頻道 - html技術(shù)

5款CSS設(shè)置漂亮好看的div邊框圖（border-image）樣式

作者:admin 時(shí)間:2023-7-6 17:12:28 瀏覽:

div的邊框（border）不但可以設(shè)置其顏色，還可以使用圖像來設(shè)置其樣式。圖片邊框比純色邊框更加炫酷漂亮好看。本文將介紹5款CSS設(shè)置的漂亮好看的div邊框圖（border-image）樣式。

CSS中的border-image屬性

border-image 是定義邊框的圖像文件，它細(xì)分為幾個(gè)屬性：

border-image-source: 邊框圖像文件地址
如：border-image-source: url('path/to/image.jpg');
border-image-slice: 圖像劃分為多個(gè)區(qū)域
如：border-image-slice: 70;
border-image-width: 邊框圖像寬度
如：border-image-width: 40%;
border-image-repeat: 邊框圖像重復(fù)
如：border-image-repeat: repeat;
border-image-outset: 指定邊框圖像區(qū)域超出邊框框的量
如：border-image-outset: 10px;

下面通過5個(gè)示例演示，讓大家更好地理解和使用 border-image 屬性。

示例1

效果圖

示例1：div邊框圖(border-image)樣式

demo download

完整HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<style>
  .container {
    border-width: 2rem;
    border-style: dotted;
    border-color: grey;
    border-image-source: url("bg2.jpg");
    border-image-repeat: repeat;
    border-image-slice: 650 175;

    height: 250px;
    width: 250px;
  }
  body {
    display: grid;
    place-items: center;
    height: 100vh;
    background: #262626;
  }
</style>
</head>
<body>
  <div class="container"></div>
</body>
</html>

可以看到，HTML代碼結(jié)構(gòu)十分簡單，只有一個(gè)div。而CSS代碼也非常少，主要包含三個(gè) border-image 屬性：border-image-source、border-image-repeat和border-image-slice。

border-image-slice 屬性本示例有2個(gè)參數(shù)值：650和175。是指上、下區(qū)域均為650，而左、右區(qū)域均為175。我們可以通過調(diào)整這兩個(gè)參數(shù)值，看到邊框圖在相應(yīng)地移動變化。

示例2

效果圖

示例2：div邊框圖(border-image)漸變樣式

demo download

完整HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<style>
.container {
    --angle: 0deg;
    border-width: 2rem;
    border-style: dotted;
    border-color: grey;
    border-image-source: linear-gradient(
      var(--angle),
      #900000,
      #ee2400,
      #ffb09c 20rem
    );
    border-image-slice: 1;
    height: 250px;
    width: 250px;
    -webkit-animation: 10s rotate linear infinite;
            animation: 10s rotate linear infinite;
}
@-webkit-keyframes rotate {
    to {
      --angle: 360deg;
    }
}
@keyframes rotate {
    to {
      --angle: 360deg;
    }
}
@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
body {
    display: grid;
    place-items: center;
    height: 100vh;
}
</style>
</head>
<body>
  <div class="container"></div>
</body>
</html>

HTML代碼結(jié)構(gòu)與示例1一樣。

本示例邊框圖（border-image）沒有用到圖像文件，而是實(shí)現(xiàn)了一個(gè)邊框漸變的效果。

示例3

效果圖

示例3：div邊框圖（border-image）樣式

demo download

完整HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<style>
:root {
    --border-repeat: round;
    --border-style: ridge;
    --border-image-slice: 70;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-wrap: wrap;
    background-color: #000000;
}
section{
    text-align: center;
    display: flex;
    width: 10rem;
    flex-wrap: nowrap;
    padding: 2rem;
    height: 10rem;
    justify-content: center;
}
.container {
    font-family: Georgia, 'Times New Roman', Times, serif;
    border-image-source: url('bg3.jpg');
    border-image-slice: var(--border-image-slice);
    border-image-repeat: var(--border-repeat);    
    border-width: 2.5rem;
    border-color: grey;
    border-style: var(--border-style);
    transition: all 0.3s ease;
}
</style>
</head>
<body>
  <section class='container'></section>
</body>
</html>

HTML代碼結(jié)構(gòu)與前面的示例一樣，這是一個(gè)炫酷好看的邊框圖像漸變的樣式。

本示例設(shè)置 border-image-repeat: round; ，指定邊框圖像使用圓角平鋪顯示。

示例4

效果圖

示例4：div邊框圖（border-image）樣式

demo download

完整HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<style>
:root {
    --border-repeat: space;
    --border-style: ridge;
    --border-image-slice: 70;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-wrap: wrap;
    background-color: #000000;
}
section{
    text-align: center;
    display: flex;
    width: 10rem;
    flex-wrap: nowrap;
    padding: 2rem;
    height: 10rem;
    justify-content: center;
}
.container {
    font-family: Georgia, 'Times New Roman', Times, serif;
    border-image-source: url('bg3.jpg');
    border-image-slice: var(--border-image-slice);
    border-image-repeat: var(--border-repeat);    
    border-width: 2.5rem;
    border-color: grey;
    border-style: var(--border-style);
    transition: all 0.3s ease;
}
</style>
</head>
<body>
  <section class='container'></section>
</body>
</html>

HTML代碼結(jié)構(gòu)與前面的示例一樣。

本示例設(shè)置 border-image-repeat: space; 屬性，指定邊框圖像使用間隔平鋪顯示。

示例5

效果圖

示例5：div邊框圖（border-image）樣式

demo download

完整HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<style>
:root {
    --border-repeat: stretch;
    --border-style: ridge;
    --border-image-slice: 120;
    --border-image-width: 2.5rem;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-wrap: wrap;
    background-color: #FDFEFE;
}
section{
    text-align: center;
    display: flex;
    width: 10rem;
    flex-wrap: nowrap;
    padding: 2rem;
    height: 10rem;
    align-items: center;
    justify-content: center;
}
.container {
    font-family: Georgia, 'Times New Roman', Times, serif;
    border-image-source: url('bg1.jpg');
    border-image-slice: var(--border-image-slice);
    border-image-repeat: var(--border-repeat);    
    border-width: 2rem;
    border-image-width: var(--border-image-width);
    border-color: grey;
    border-style: var(--border-style);
    transition: all 0.3s ease;
}
</style>
</head>
<body>
  <section class='container'></section>
</body>
</html>