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

This article mainly shows you "css3 how to achieve the rectangle with a border", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "css3 how to achieve the rectangle with a frame" this article.

Methods: 1, using the "background:linear-gradient (angle, transparent missing angle size, color 0)" statement, you can set the missing corner for the rectangular element; 2, put the small missing corner rectangle in the large rectangle with the same direction of missing corner, you can realize the missing corner rectangle with frame.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

In css, to implement the missing corner style with a border, you need to make use of the background property and the linear-gradient () function.

The background attribute is used to set the background style of the element

The linear-gradient () function is used to set the linear gradient style of the element, and only the angle and color of the linear gradient are needed to set the rectangular element to the style with missing corners.

At this time, although the element is short of corners, you can't use the border style to add the border directly, because the element is just the background style for the appearance of missing corners, and the border is still rectangular.

We can put the missing corner rectangle in the same direction and the small missing corner rectangular element in the large missing corner rectangle element.

Examples are as follows:

Document .box {width: 100px; height: 60px; padding: 4px; background:linear-gradient (135degjue 10px 9px 2baaca 0);} .box_inner {width: 100%; height: 100%; background:linear-gradient (135degjue 9px, # fff 0);}

Output result:

These are all the contents of the article "how to achieve a rectangular rectangle with a border in css3". 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.