是否有任何方法在div元素的轮廓上获得圆角,类似于border-radius?
当前回答
我通常使用: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 = " # " > < / >按钮
其他回答
我觉得你在找这样的东西。
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 >
*除了使用图像
如果你想要浮雕效果,你可以这样做:
.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>
我还没有找到一个工作周围有这个工作在其他浏览器。
编辑:你能做到这一点的唯一其他方法是使用盒子阴影,但如果你已经在该元素上有一个盒子阴影,这将不起作用。
尝试使用填充和背景色的边框,然后为轮廓边框:
.round_outline {
padding: 8px;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
对我来说很管用。
我在制作自定义单选按钮,我发现最好的自定义方法是使用伪元素,比如:Codepen
/*CSS is compiled from SCSS*/ .product-colors { margin-bottom: 1em; display: flex; align-items: center; } .product-colors label { position: relative; width: 2.1em; height: 2.1em; margin-right: 0.8em; cursor: pointer; } .product-colors label:before { opacity: 0; width: inherit; height: inherit; padding: 2px; border: 2px solid red; border-radius: 0.2em; content: ""; position: absolute; z-index: 1; background: transparent; top: -4px; left: -4px; } .product-colors input { position: absolute; opacity: 0; width: 0; height: 0; } .product-colors input:checked + label:before, .product-colors input:focus + label:before { opacity: 1; } <div class="product-colors"> <input type="radio" name="cs" id="cs1" value="black"> <label for="cs1" style="background:black"></label> <input type="radio" name="cs" id="cs2" value="green"> <label for="cs2" style="background:green"></label> <input type="radio" name="cs" id="cs3" value="blue"> <label for="cs3" style="background:blue"></label> <input type="radio" name="cs" id="cs4" value="yellow"> <label for="cs4" style="background:yellow"></label> </div>
我有一个圆形边框的输入字段,想要改变焦点轮廓的颜色。我无法控制输入控件中可怕的方形轮廓。
所以我用了盒影。实际上我更喜欢阴影的平滑外观,但阴影可以被硬化以模拟圆形轮廓:
输入,输入:焦点{ 边界:没有; 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">
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?