无涯教程网

Css 边框半径 + 背景 colored颜色 == 裁剪边框

发布于09月12日

考虑一个div与border-radius, border，和background-color个CSS属性应用:

<div style="background-color:#EEEEEE; border-radius:10px; border: 1px black solid;">
  Blah
</div>

在此处输入图像描述

现在考虑一个类似的布局，但是在内部div中指定了background-color个布局:

<div style="border-radius:10px; border: 1px black solid;">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

在此处输入图像描述

我对inner <div>中的background-color模糊了outer <div>的边界感到失望.

这是这个问题的简化示例.实际上，我使用<table>作为具有交替行 colored颜色的内部元素.我使用<div>作为外层元素，因为border-radius似乎对<table>元素不起作用.这个问题的Here's a jsfiddle个样本.

有没有人有解决方案的建议？

推荐答案

try 外部div中的overflow:hidden:

<div style="border-radius:10px; border: 1px black solid; overflow: hidden">
  <div style="background-color:#EEEEEE;">
    Blah
  </div>
</div>

Css相关问答推荐

如何允许在bslb中 Select 输入重叠卡片？

单独.css文件中的样式不适用于Angular 元件

向左或向右浮动时的不同图像边距

防止在添加更多项目时扩展CSS网格行

如何使shiny 的showNotification可滚动？

如何阻止 Mud Blazor MudTable 列扩展以适合文本

CSS Select 器在 rvest 中找到，在 RSelenium 中找不到

使用 React JS 和自定义 CSS 创建 Cookie 横幅

如何在悬停另一个部分的元素时使元素可见？

用户代理必须处理(或表现得好像他们这样做)每个链接就好像链接指向单独的样式表这句话是什么意思？

如何添加一个类以在开始时触发转换

内部和外部 div 之间的像素大小的间隙

CSS 使文本扩展并保持居中与圆形扩展 div 的问题

如何使单选按钮看起来像切换按钮

包装器内两个跨度之一上的文本溢出省略号

firefox overflow-y 不能使用嵌套的 flexbox

CSSzoom 高度以匹配宽度 - 可能与外形尺寸

CSS设置宽度以填充剩余区域的百分比

如何在浏览器的右下角放置一个div？

名称-值对的语义和 struct

实用课程推荐

相关教程推荐