是否有任何方法在div元素的轮廓上获得圆角,类似于border-radius?
当前回答
(2023年2月)
据我所知,只有Firefox和Firefox for android支持Outline半径。
-moz-outline-radius: 1 em;
其他回答
我有一个圆形边框的输入字段,想要改变焦点轮廓的颜色。我无法控制输入控件中可怕的方形轮廓。
所以我用了盒影。实际上我更喜欢阴影的平滑外观,但阴影可以被硬化以模拟圆形轮廓:
输入,输入:焦点{ 边界:没有; border - radius: 2分; Box-shadow: 0 0 0 1pt灰色; 大纲:没有; 过渡:1。; } /*平滑的轮廓与盒子阴影:*/ .text1:专注{ 箱影:0 0 3pt 2pt矢车菊蓝; } /*硬“轮廓”与盒子阴影:*/ .text2:专注{ 箱影:0 0 0 2pt红色; } <输入class = " text1 " > < br > < br > <input type=text class="text2">
你可以用盒子阴影代替这样的轮廓
box-shadow: 0 0 1px #000000;
border-radius: 50px;
outline: none;
类似于上面的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变体。你可以看到上面的结果
我把轮廓设置为透明。
input[type=text] {
outline: rgba(0, 0, 0, 0);
border-radius: 10px;
}
input[type=text]:focus {
border-color: #0079ff;
}
我想在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
推荐文章
- 如何以及在哪里使用::ng-deep?
- Angular 2模板中的标签是什么意思?
- 如何设置身体高度溢出滚动
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 将RGB转换为白色的RGBA
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer