CSS 高级CSS ROUNDED CORNERS

Posted

tags:

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

<style type="text/css">
div.box { overflow:hidden} /* IE font-size fix */
/* MIDDLE */
	div.box.body div.box.right {
		background-image:url(m_r.png); background-position: right; background-repeat: repeat-y;
	}
	div.box.body div.box.left {
		background-image:url(m_l.png); background-position: left; background-repeat: repeat-y;
	}
	div.box.body div.box.center {
		background-image:url(m_c.png); margin-left: 12px; margin-right: 12px;
	}

/* TOP */
	div.box.head div.box.right {
		background-image:url(t_r.png); background-position: top right; background-repeat: no-repeat; height:12px;
	}
	div.box.head div.box.left {
		background-image:url(t_l.png); background-position: top left; background-repeat: no-repeat; height:12px;
	}
	div.box.head div.box.center {
		background-image:url(t_c.png); height:12px;  margin-left: 12px; margin-right: 12px; 
	}
	
/* BOTTOM */
	div.box.foot div.box.right {
		background-image:url(b_r.png); background-position: right bottom; background-repeat: no-repeat; height:12px;
	}
	div.box.foot div.box.left {
		background-image:url(b_l.png); background-position: left bottom; background-repeat: no-repeat; height:12px;
	}
	div.box.foot div.box.center {
		background-image:url(b_c.png); margin-left: 12px; margin-right: 12px; height:12px; 
	}

</style>


<div class="box head">
    <div class="box right">
    <div class="box left">
    <div class="box center"></div>
    </div>
    </div>
</div>

<div class="box body">
    <div class="box right">
    <div class="box left">
    <div class="box center">TEXT</div>
    </div>
    </div>
</div>

<div class="box foot">
    <div class="box right">
    <div class="box left">
    <div class="box center"></div>
    </div>
    </div>
</div>

以上是关于CSS 高级CSS ROUNDED CORNERS的主要内容，如果未能解决你的问题，请参考以下文章

CSS CSS Rounded Corners没有图像支持Firfox，Safari，Chrome，Opera

css select2.square.corners.css

如何在 vscode 上为 css 模块设置更漂亮

Tailwindcss：语法错误：`hover:rounded-xl` 类不存在

android 圆角边框 阴影边框怎么设置

顺风CSS渐变问题