没有 border-radius 的圆角边框

Question

我正在使用 HTML4、CSS2 开发网站。所以我不能使用 border-radius 属性。如何创建 <div> 或 <table> 圆角边框？

提前谢谢你。

Answer 1

//意识到你正在使用css2

/*Your Id/class*/
div {
  border: 2px solid black;
  border-radius: 25px 50px 10px 23px;
}

先使用border:创建边框，再使用border-radius指定半径。

您可以输入多个值来指定每条边。值的模式是： 左上角右上角左下角右下角

您也可以只指定一两个或三个值。这是模式：

四个值：第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角
三个值：第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于底部-右
两个值：第一个值应用于左上角和右下角，第二个值应用于右上角和左下角
一个值：所有四个角都等圆

Answer 2

我能想到的唯一方法是一些 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。

Answer 3

找到了相关的东西。参考 - 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>

Answer 4

  #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>

没有 border-radius 的圆角边框

Rounded border without border-radius

html

css

html4

web