同时使用border-radius和box-shadow(CSS)

umuewwlo  于 2023-05-02  发布在  其他
关注(0)|答案(6)|浏览(301)

好吧,我知道这两个属性都还没有完全支持,但我还是在使用它们:P
当我添加一个border-radius和box-shadow(有和没有供应商前缀)时,border-radius的半径对于box-shadow是不透明的。示例:http://cndg.us/3f41a0
这是可以修复的吗?我还注意到-webkit-box-shadow在隐藏div方面有一些问题。

omvjsjqw

omvjsjqw1#

可以在此处检查:http://jsfiddle.net/Zw4QA/1/
我认为你有一个元素在你的div与圆角corders。必须将此元素的角应用到。目前,父元素上的圆角不会应用于子元素,除非您在CSS中指定它。
更多的CSS3魔术检查这个链接:http://css3please.com/

请注意,每个浏览器都有自己处理阴影和边框半径的方式http://thany.nl/apps/boxshadows/

wlp8pajw

wlp8pajw2#

对于包含单元格的表格:
JSFiddle

超文本标记语言

<table>
    <tr>
        <td class='one'>One</td>
        <td class='two'>Two</td>
    </tr>
    <tr>
        <td colspan="2" class='three'>Three</td>
    </tr>
</table>

CSS

body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 padding: 100px;
 background: pink;
}

table {
/* basic */
 background-color: #fff;
 margin: 0 auto;
 width: 200px;
 padding: 100px;
 text-align: center;
/* border-radius */
 border-radius: 20px;
/* box-shadow */
 box-shadow: rgba(0,0,0,0.8) 0 0 10px;
 border-collapse: collapse;
}

table td{
  color: white;
}

td.one{
    border-radius: 20px 0 0 0;
    background-color: black;
}
td.two{
    border-radius: 0 20px 0 0;
    background-color: darkgreen;
}
td.three{
    border-radius: 0 0 20px 20px;
    background-color: darkred;
}
xpcnnkqh

xpcnnkqh3#

根据MDN的文档,框形阴影会自动选择元素本身的边界半径。这里是一个链接:https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#:~:text= The%20box%2Dshadow%20property%20enables,on%20the%20same%20rounded%20corners

axzmvihb

axzmvihb4#

您可以创建一个边界半径到div或box-shadow将只创建阴影
生成器边界半径和框阴影查找活代码:https://css-box-shadows.com/css-box-shadow-generator/

csga3l58

csga3l585#

有时,如果父元素中有overflow: hidden CSS property,它也可以裁剪子元素的阴影。一定要把它取下来,它应该能正常工作。

r1wp621o

r1wp621o6#

当我在我父亲的网站上闲逛时,我发现你可以把半径特性添加到阴影中。所以我有一个div里面的日历,都有圆形的边缘(0。7em确切地说),我想添加一个下拉阴影,但那些几乎总是有一个正方形的边缘,因此将冲突与我的圆形边缘。只是在框阴影属性上瞎折腾,然后决定如果我给它添加半径会怎么样?所以我做了。在网上找不到任何提到这种技术的地方,所以我可能发现了一些独特的东西。总之,足够的背景故事,这里的代码:
CSS:

box-shadow-bottom-right-radius: 0.7em; //you can enter whatever value you want
box-shadow-bottom-left-radius: 0.7em;
box-shadow-top-right-radius: 0.7em;
box-shadow-top-left-radius: 0.7em;

这样你就可以给盒子阴影本身添加一个半径,就像你通常对边框所做的那样。

相关问题