我找到的每个指南都有一条线并填充相同的颜色。我想要的只是一个带有红线和白色填充的圆圈。
我试过了:
.circle {
border: red;
background-color: #FFFFFF;
height: 100px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
width: 100px;
}
但是无法获得红色边框?
答案 0 :(得分:32)
你忘了设置边框的宽度!将border: red;
更改为border:1px solid red;
这里是获取圈子的完整代码:
.circle {
background-color:#fff;
border:1px solid red;
height:100px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width:100px;
}

<div class="circle"></div>
&#13;
答案 1 :(得分:18)
您遗漏了border width中的border style和Border shorthand property属性:
<div class="circle"></div>
&#13;
String sCurrentLine; // variable, where we will save info from file
// open file
BufferedReader br = new BufferedReader(new FileReader("C:\\testing.txt"));
//while not end of file read line
while ((sCurrentLine = br.readLine()) != null) {
System.out.println(sCurrentLine);}
//don't forget to close file
if (br != null) br.close();
--------------------
Example:
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
public class BufferedReaderExample {
public static void main(String[] args) {
try (BufferedReader br = new BufferedReader(new FileReader("C:\\testing.txt")))
{
String sCurrentLine;
while ((sCurrentLine = br.readLine()) != null) {
System.out.println(sCurrentLine);
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
&#13;
此外,您可以对border-radius属性使用百分比,以使该值不受圆宽/高度的影响。这就是为什么我使用50%作为border-radius(border-radius inn pixels and percent here上的更多信息)。
旁注:在您的示例中,您没有指定border-radius属性,而没有供应商前缀,因为在Chrome 4 safari 4和Firefox 3.6使用它们之前,您只需要浏览器(见canIuse)。
答案 2 :(得分:2)
http://jsbin.com/qamuyajipo/3/edit?html,output
.circle {
border: 1px solid red;
background-color: #FFFFFF;
height: 100px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
width: 100px;
}
答案 3 :(得分:2)
试试这个:
.circle {
height: 20px;
width: 20px;
padding: 5px;
text-align: center;
border-radius: 50%;
display: inline-block;
color:#fff;
font-size:1.1em;
font-weight:600;
background-color: rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.2);
}
答案 4 :(得分:1)
这是一个jsfiddle,所以你可以看到这个工作的一个例子。
HTML code:
<div class="circle"></div>
CSS代码:
.circle {
/*This creates a 1px solid red border around your element(div) */
border:1px solid red;
background-color: #FFFFFF;
height: 100px;
/* border-radius 50% will make it fully rounded. */
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius: 50%;
width: 100px;
}
<div class='circle'></div>
答案 5 :(得分:0)
.circle {
background-color:#fff;
border:1px solid red;
height:100px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
width:100px;
}
<div class="circle"></div>