Home > Web Front-end > HTML Tutorial > [Recommended] Make div css rounded corners_html/css_WEB-ITnose

[Recommended] Make div css rounded corners_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:30:33
Original
1092 people have browsed it


"Try not to round the corners, you need to cut the picture" "This design code is difficult to implement" and so on. Yesterday I saw on the Internet that you can design the effect of rounded corners using only code. ~ Share with everyone~

First look at the style sheet file:
.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right :1px solid #000; border-left:1px solid #000; margin:0 1px;}

Then look at the page code:

< b class="b4">
Of course you can also use other tags

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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template