CSS 纯css圆角没有图像

Posted 2021-05-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 纯css圆角没有图像相关的知识，希望对你有一定的参考价值。

The simple way of using rounded corners using css with the header and the content in it.

HTML:
&lt;b class=&quot;b1h&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2h&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3h&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b4h&quot;&gt;&lt;/b&gt;
&lt;div class=&quot;headh&quot;&gt;
&lt;h3&gt;Here is your Header!&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;contenth&quot;&gt;
&lt;div&gt;No images!&lt;/div&gt;
&lt;/div&gt;
&lt;b class=&quot;b4bh&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b3bh&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b2bh&quot;&gt;&lt;/b&gt;&lt;b class=&quot;b1h&quot;&gt;&lt;/b&gt;

CSS:
.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
.b1h {height:1px; background:#aaa; margin:0 5px;}
.b2h, .b2bh {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3h, .b3bh {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.b2bh, .b3bh, .b4bh {background: #ddd;}
.headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contenth div {margin-left: 12px; padding-top: 5px;}

以上是关于CSS 纯css圆角没有图像的主要内容，如果未能解决你的问题，请参考以下文章

CSS 纯CSS按钮，圆角，渐变和阴影

CSS 没有图像和数量JS的圆角。 CSS解决方案

CSS 没有图像的圆角

CSS 圆角没有图像

HTML 圆角没有图像，只是css，这工作

CSS圆角适用于所有没有图像和javascript的浏览器