How to use the border attribute in CSS3

Today I will share with you the usage of the border attribute in CSS3. It has certain reference value and I hope it will be helpful to everyone.

The borders in CSS3 have added many new functions to make our border designs more beautiful. Next, we will introduce the usage of several borders in detail in this article

css3 border

##(1) Border shadow

box-shadow：h-shadow v-shadow blur spread color inset

h-shadow, v-shadow: horizontal and vertical shadow positions, negative values ​​can be written

blur: blur distance (the larger the value, the blurrier).

spread: The size of the shadow

color: The color of the shadow

inset: Change the outer shadow (outset) to the inner shadow

The first two values ​​​​is required, the next four values ​​​​are optional

div{
			width:100px;
			height: 100px;
			background-color: pink;
			box-shadow:10px 10px 10px gray;
		}

(2) Border image

border-image: src slice width outset repeat

src: The path of the image.

slice: The picture border is offset inward.

width: The width of the picture border.

outset: The amount by which the border image area exceeds the border.

repeat: Whether the image border should be repeated, rounded or stretched

Pay attention to browser compatibility issues

div{
border:20px solid transparent;
width:100px;
height:50px;
line-height: 50px;
text-align: center;
padding:10px 20px;
border-image:url(images/12.png) 50 50 round;
-moz-border-image:url(images/12.png) 50 50 round; /* Firefox */
-webkit-border-image:url(images/12.jpg) 50 50 round; /* Safari 和 Chrome */
-o-border-image:url(images/12.png) 50 50 round; /* Opera */
}

(3) Border rounded corners

border-radius

div{
width:150px;
height:30px;
border:2px solid #ccc;
border-radius:25px;
line-height: 30px;
text-align: center;
}

Summary: The above is That’s all for this article. I hope to be helpful.

The above is the detailed content of How to use the border attribute in CSS3. For more information, please follow other related articles on the PHP Chinese website!