Question

我找到的每个指南都有一条线并填充相同的颜色。我想要的只是一个带有红线和白色填充的圆圈。

我试过了：

.circle {
    border: red;
    background-color: #FFFFFF;
    height: 100px;
    -moz-border-radius:75px;
    -webkit-border-radius: 75px;
    width: 100px;
}

但是无法获得红色边框？

Answer 1

你忘了设置边框的宽度！将border: red;更改为border:1px solid red;

这里是获取圈子的完整代码：

＆＃13;

.circle {
    background-color:#fff;
    border:1px solid red;    
    height:100px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:100px;
}

＆＃13;

<div class="circle"></div>

＆＃13;

Answer 2

您遗漏了border width中的border style和Border shorthand property属性：

＆＃13;

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

Answer 3

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;
}

Answer 4

试试这个：

.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);
}

Answer 5

这是一个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>

Answer 6

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

带边框的

6 个答案: