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 insetdiv{ width:100px; height: 100px; background-color: pink; box-shadow:10px 10px 10px gray; }
(2) Border image
border-image: src slice width outset repeatsrc: 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 stretchedPay attention to browser compatibility issuesdiv{ 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-radiusdiv{ width:150px; height:30px; border:2px solid #ccc; border-radius:25px; line-height: 30px; text-align: center; }
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!