Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve multicolor CSS frame, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Multicolor CSS border

What if we want to add more color to the border than the previous example?

We can even set each side of the element to a different color.

To do this, we will need some custom backgrounds with gradients.

Look at the following example.

# box {font-family: Arial; font-size: 18px; line-height: 30px; font-weight: bold; color: white; padding: 40px Background: linear-gradient (to top, # 4caf50, # 4caf50 10px, transparent 10px), linear-gradient (to right, # c1ef8c, # c1ef8c 10px, transparent 10px), linear-gradient (to bottom, # 8bc34a, # 8bc34a 10px, transparent 10px), linear-gradient (to left, # 009688, # 009688 10px, transparent 10px); background-origin: border-box;}

Effect:

The above is all the contents of the article "how to achieve multicolor CSS frames". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.