2023-06-06 05:00:00

轮廓半径?

是否有任何方法在div元素的轮廓上获得圆角,类似于border-radius?


当前回答

尝试使用填充和背景色的边框,然后为轮廓边框:

.round_outline {
  padding: 8px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid black;
}

对我来说很管用。

其他回答

用这个吧: Box-shadow: 0px 0px 1px红色;

正如其他人所说,只有firefox支持这个功能。这里有一个工作,做同样的事情,甚至工作与虚线轮廓。

.has-outline { 显示:inline-block; 背景:# 51 ab9f; border - radius: 10 px; 填充:5 px; 位置:相对; } .has-outline:{后 border - radius: 10 px; 填充:5 px; 边框:2px虚线#9dd5cf; 位置:绝对的; 内容:”; 上图:2 px; 左:2 px; 底部:2 px; 右:2 px; } < div class = " has-outline”> 我能画出轮廓 < / div >

如果你想要浮雕效果,你可以这样做:

.embossed { background: #e5e5e5; height: 100px; width: 200px; border: #FFFFFF solid 1px; outline: #d0d0d0 solid 1px; margin: 15px; } .border-radius { border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -khtml-border-radius: 20px; } .outline-radius { -moz-outline-radius: 21px; } <div class="embossed"></div> <div class="embossed border-radius"></div> <div class="embossed border-radius outline-radius">-MOZ ONLY</div>

我还没有找到一个工作周围有这个工作在其他浏览器。

编辑:你能做到这一点的唯一其他方法是使用盒子阴影,但如果你已经在该元素上有一个盒子阴影,这将不起作用。

我觉得你在找这样的东西。

div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
    background-color: #CCC;
    height: 100px;
    width: 160px;
}

Edit

有一个firefox专用的-moz-outline-radius,但这在IE/Chrome/Safari/Opera等浏览器上行不通。所以,看起来最跨浏览器兼容的方法*是使用包装器div:

div.inner { -webkit-border-radius: 10 px; -moz-border-radius: 10 px; border - radius: 10 px; 边框:1px纯黑色; background - color: # CCC; 身高:100 px; 宽度:160 px; } div.outer { 显示:inline-block; -webkit-border-radius: 10 px; -moz-border-radius: 10 px; border - radius: 10 px; 边框:1px纯红色; } < div class = "外" > < div class = "内部" > < / div > < / div >


*除了使用图像

我喜欢这样。

.circle:before {
   content: "";
   width: 14px;
   height: 14px;
   border: 3px solid #fff;
   background-color: #ced4da;
   border-radius: 7px;
   display: inline-block;
   margin-bottom: -2px;
   margin-right: 7px;
   box-shadow: 0px 0px 0px 1px #ced4da;
}

它会创建一个灰色的圆,周围有边框,边框也是1px !