是否有任何方法在div元素的轮廓上获得圆角,类似于border-radius?
当前回答
尝试使用填充和背景色的边框,然后为轮廓边框:
.round_outline {
padding: 8px;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
对我来说很管用。
其他回答
类似于上面的Lea Hayes,但我是这样做的:
div { 背景:# 999; 身高:100 px; 宽度:200 px; 边框:#999实心1px; border - radius: 10 px; 保证金:15 px; Box-shadow: 0px 0px 0px 1px #fff插入; } < div > < / div >
没有必要嵌套DIVs或jQuery,尽管为了简洁起见,我省略了一些CSS的-moz和-webkit变体。你可以看到上面的结果
clip-path: circle(100px at center);
这实际上是一个可点击的圆,而边界半径仍然是一个正方形,但看起来像圆。
我想在Bootstrap导航栏中为下拉菜单提供一些不错的焦点可访问性,并且对此非常满意:
a.dropdown-toggle:专注{ 显示:inline-block; Box-shadow: 0 0 0 2px #88b8ff; border - radius: 2 px; } <a href="https://stackoverflow.com" class="dropdown-toggle">访问Stackoverflow
There is the solution if you need only outline without border. It's not mine. I got if from Bootstrap css file. If you specify outline: 1px auto certain_color, you'll get thin outer line around div of certain color. In this case the specified width has no matter, even if you specify 10 px width, anyway it will be thin line. The key word in mentioned rule is "auto". If you need outline with rounded corners and certain width, you may add css rule on border with needed width and same color. It makes outline thicker.
我通常使用:after伪元素来完成这个任务:
当然,这取决于使用情况,这种方法允许控制单个边界,而不是使用硬阴影方法。
你也可以设置-1px偏移量,并使用背景线性渐变(无边框)再次获得不同的效果。
身体{ 保证金:20 px; } 一个{ 背景:# 999; 填充:10px 20px; border - radius: 5 px; 文字修饰:没有; 颜色:# fff; 位置:相对; 边框:2px实心#000; } {后 内容:”; 显示:块; 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; border - radius: 5 px; 边框:2px实体#ccc; } < a href = " # " > < / >按钮
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?