CSS3 3 - Border Images | Border image property | Border-image-source | Border-image-slice

Опубликовано: 04 Октябрь 2024
на канале: Ankpro Training
4,314
51

Border Images in CSS3

CSS Border image property is used to add image border to some elements.

Border Image Property :
Border-image
Border-image-source
Border-image-slice
Border-image-width
border-image-outset
Border-image-repeat


CSS3 code for border images :
p{
height:100px;
width: 250px;
float:left;
margin:80px;
padding:20px;
border:20px solid transparent;
}
.border{
border-image-source: url("images.png");
border-image-slice:100;
border-image-repeat: repeat;
border-image-width: 80px;
border-image-outset: 50px;
}
.border1{
border-image-source: url("images.png");
border-image-slice:100;
border-image-repeat:stretch;
border-image-width: 80px;
border-image-outset: 50px;
}
.border2{
border-image-source: url("holi.jpg");
border-image-slice:200;
border-image-repeat:space;
border-image-width: 80px;
border-image-outset: 50px;
}
.border3{
border-image:url("holi.jpg") 200 repeat;
}