[英]Rounded border without border-radius
我正在使用HTML4
和CSS2
开发一个网站。 所以我不能使用border-radius属性。 如何创建<div>
或<table>
具有圆角边框的内容?
先感谢您。
我能想到的唯一方法是某些svg
hacky方法,例如:
<svg width="500" height="400"> <path d="M50,25 h300 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-300 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="#0089cc" stroke-width="2" /> </svg>
或者您可以在Photoshop / GIMP中创建一个带有圆角边框的透明图像。 然后,您可以仅使用CSS background-image
路径URL作为您要定位的div
。
找到相关的东西。 参考-LINK
.b1, .b2, .b3, .b4 { font-size: 1px; overflow: hidden; display: block; } .b1 { height: 1px; background: #888; margin: 0 5px; } .b2 { height: 1px; border-right: 2px solid #888; border-left: 2px solid #888; margin: 0 3px; } .b3 { height: 1px; border-right: 1px solid #888; border-left: 1px solid #888; margin: 0 2px; } .b4 { height: 2px; border-right: 1px solid #888; border-left: 1px solid #888; margin: 0 1px; } .contentb { border-right: 1px solid #888; border-left: 1px solid #888; } .contentb div { margin-left: 5px; }
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="contentb"> <div>Round Border!!</div> </div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
//意识到您正在使用css2
/*Your Id/class*/
div {
border: 2px solid black;
border-radius: 25px 50px 10px 23px;
}
使用边框:首先创建边框,然后使用边框半径指定半径。
您可以输入多个值来指定每个边。 值的模式为: 左上角右上角右下角左下角右下角
您也只能指定一个两个或三个值。 这是模式:
四个值:第一个值适用于左上角,第二个值适用于右上角,第三个值适用于右下角,第四个值适用于左下角
三个值:第一个值适用于左上角,第二个值适用于右上角和左下角,第三个值适用于右下角
两个值:第一个值适用于左上角和右下角,第二个值适用于右上角和左下角
一个值:将所有四个角均等地舍入
#header { float: left; width: 100%; font-size: 93%; line-height: normal; } #header ul { margin: 0; padding: 0; list-style: none; } #header li { float: left; background: url("https://image.ibb.co/kPAMhv/norm_right.gif") no-repeat right top; margin: 0; padding: 0; } #header a { display: block; background: url("https://image.ibb.co/f01GFF/norm_left.gif") no-repeat left top; padding: 5px 15px; }
<div id="header"> <ul> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.