div css to achieve rounded borders_html/css_WEB-ITnose-HTML Tutorial-php.cn

div css to achieve rounded borders_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:32:11

Original

1445 people have browsed it

div css to implement rounded borders: I checked on the Internet to implement rounded borders with div css. Many methods are to implement rounded rectangles. What I introduce here is to implement rounded rectangles. border method. Use code to illustrate the problem:

With my ability, Pure DIV CSS can only achieve this effect. This is where the content is placed. It is easy to understand the rules of the code by yourself.
The code is very simple. The a layer is the layer where the content is placed. Its width value is 300, and then decreases in width by 2 pixels outward. The outermost layer needs to add background as an attribute. The purpose is to present the upper and lower lines.
A 3-pixel rounded border is implemented here. The number of b layers determines how many pixel borders are implemented. It is recommended not to have more than 3 layers, preferably 2 layers, which is a 2-pixel rounded border, or 1 layer, because the more layers there are, the less smooth the rounded corners will be. Both firefox and IE6 pass the test.

Examples are as follows:
----------------------- -------------------------------------------------- --

Related labels：

div+css实现圆角边框

source：php.cn

Previous article：div css js collapsible menu_html/css_WEB-ITnose Next article：DIV CSS web page layout_html/css_WEB-ITnose

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