带边框的

时间:2015-10-22 09:32:34

标签: css css-shapes

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

我试过了:

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

但是无法获得红色边框?

6 个答案:

答案 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;
&#13;
&#13;

答案 1 :(得分:18)

您遗漏了border width中的border styleBorder shorthand property属性:

&#13;
&#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;
&#13;
&#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>