沒有邊界圓角的圓角邊框

我正在開發一個網站，使用HTML4,CSS2。所以我不能使用border-radius屬性。如何創建<div>或<table>什麼是圓角邊框？沒有邊界圓角的圓角邊框

預先感謝您。

2017-07-03 LSH

使用'svg'用'object'標籤＆那除了使用圓形形狀的圖像的唯一解決方案。否則使用'css3 polyfill'並使用'border-radius'。 – Priya

這應該回答你的問題 - > https：// stackoverflow。com/q/6058075/8161432 –

您可以將'div'設爲具有圓角的'background-image'。 – Toastrackenigma

發現有關的東西。參考 - 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>

來源

2017-07-03 03:57:01 Hash

//意識到你正在使用CSS2

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

使用邊界：首先創建邊界，然後使用邊界半徑指定半徑。

您可以輸入多個值來指定每條邊。值的模式是： 左上右上左下右下

您也只能指定一個兩個或三個值。這裏是圖案：

四個值：第一值適用於左上方，第二值適用於右上方，第三值適用於右下，和第四值適用於左下角
三個值：第一值適用於左上方，第二值適用於右上和左下，和第三值適用於右下
兩個值：第一個值適用於左上角和右下角，而第二個值適用於右上和左下角
一個價值：所有四個邊角均同樣圓潤

來源

2017-07-03 03:02:50 Theerockzz

他說他不能使用CSS3或border-radius。 – Rob

如何刪除評論 – Theerockzz

如果你想刪除你所做的評論，它的右側會有一個'x'。 – Rob

我能想到的唯一的辦法就是一些svg哈克方法，例如：

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

來源

2017-07-03 03:26:56 jswebb

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

來源

2017-07-03 04:36:45

沒有邊界圓角的圓角邊框

回答

相關問題