|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
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
效果圖
完整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)十分簡(jiǎn)單，只有一個(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)地移動(dòng)變化。
示例2
效果圖
完整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
效果圖
完整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
效果圖
完整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
效果圖
完整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>
HTML代碼結(jié)構(gòu)與前面的示例一樣。
本示例設(shè)置 border-image-repeat: stretch; 屬性，指定邊框圖像使用拉伸平鋪顯示。
瀏覽器支持
總結(jié)
本文介紹了5款CSS設(shè)置漂亮好看的div邊框圖（border-image）樣式，喜歡的朋友可以收藏本頁(yè)，或直接下載源碼備用。
相關(guān)文章
- CSS如何讓DIV背景圖片隨窗口大小自動(dòng)縮放【示例】
- [2示例]如何使用CSS將div中的圖像居中對(duì)齊（垂直和水平）
- [2示例]使用 CSS 使 div 可水平滾動(dòng)
- 【8實(shí)例】詳解css z-index的值使用區(qū)別:-1,0,1,auto,999
- 使用偽元素在p或div左邊(border)上加一個(gè)感嘆號(hào)警告提示符
- 【JQuery插件】把網(wǎng)頁(yè)或某div或table表格內(nèi)容轉(zhuǎn)為圖片并下載
- 6種方法改變div的id值（使用JQuery或JS）
- 用JQuery或JS改變div的id的五種方法
- div層顯示/隱藏的6種常見效果
相關(guān)文章
- 漂亮的 h1 h2 h3 標(biāo)題CSS樣式
- CSS如何讓DIV背景圖片隨窗口大小自動(dòng)縮放【示例】
- 純CSS自定義滾動(dòng)條的跨瀏覽器演示
- 在 Edge, IE 10/11 中隱藏滾動(dòng)條
- [3個(gè)示例]默認(rèn)隱藏滾動(dòng)條，鼠標(biāo)懸停時(shí)顯示
- [15個(gè)實(shí)例]CSS自定義滾動(dòng)條的樣式：圓角/平角/寬度/顏色等
- 如何用CSS自定義滾動(dòng)條寬度及軌道背景顏色
- 6個(gè)純CSS自定義的簡(jiǎn)單而優(yōu)雅的滾動(dòng)條樣式
- CSS實(shí)現(xiàn)樣式新穎有特色又好看的下拉菜單
- 純CSS實(shí)現(xiàn)的2D/3D Loading加載/進(jìn)度條動(dòng)畫
- CSS實(shí)現(xiàn)漂亮的激活按鈕動(dòng)畫(Activate Button animation)
- CSS實(shí)現(xiàn)漂亮又有特點(diǎn)的可拖動(dòng)滑竿
- CSS實(shí)現(xiàn)菜單/選項(xiàng)卡(tab)切換時(shí)流線過渡效果
- CSS加載動(dòng)畫(loading animation)-扭動(dòng)的圓環(huán)
- CSS按鈕鼠標(biāo)懸停效果(文字波浪動(dòng)畫)
x
- 站長(zhǎng)推薦
