Home > Web Front-end > CSS Tutorial > How to use the border attribute in CSS3

How to use the border attribute in CSS3

清浅
Release: 2018-11-26 15:51:45
Original
2262 people have browsed it

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;
		}
Copy after login

Image 16.jpg

(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 */
}
Copy after login

Image 21.jpg

(3) Border rounded corners

border-radius


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

Image 19.jpg

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template