所以,我正在努力实现这个结果:
这是我尝试时得到的:https://jsfiddle.net/wvdkmjge/
.container {
width: 100px;
height: 1px;
background-color: black;
}
.circle {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
background-color: transparent;
border: solid 1px black;
border-radius: 50%;
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<div class="circle">
</div>
</div>Run Code Online (Sandbox Code Playgroud)
而且,我希望我不会在圆圈上看到边界线.有什么建议?
我想在div的背景上绘制2条平行的对角线.
请参阅我的表在这里:
body {
background-image: url("http://i.imgur.com/TnPgXl4.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
padding: 40px;
}
#table {
width: 800px;
height: 300px;
background-color: transparent;
border: solid 1px white;
}Run Code Online (Sandbox Code Playgroud)
<div id="table"></div>Run Code Online (Sandbox Code Playgroud)
我希望实现这样的目标:

例如,我有一个矩形:
<div id="rec">
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
#rec {
width: 100px;
height: 100px;
background: black;
border: solid;
border-width: 3px;
border-color: red;
}
Run Code Online (Sandbox Code Playgroud)
JSFIDDLE: https ://jsfiddle.net/tquq01hq/
我想将边框划分为4个相等的部分,每个部分将采用不同的颜色.有什么建议怎么办?