CSS CSS Rounded Corners没有图像支持Firfox，Safari，Chrome，Opera

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS CSS Rounded Corners没有图像支持Firfox，Safari，Chrome，Opera相关的知识，希望对你有一定的参考价值。

= HTML ==================================================
<div class="roundedbox">...</div>

= CSS ===================================================
.roundedbox {
    width: 100px;
    height: 100px;
    background: #666;
    -webkit-border-radius: 5px;
    /*
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    */
    -moz-border-radius: 5px;
    /*
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-bottomleft:5px;
    */
    border-radius: 5px;
    /*
    border-top-left-radius:5px;
    border-top-left-radius:5px;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    */
}
/*= CSS hack for Opera 9.5 Rounded Corners */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    .roundedbox {
        background:transparent url(shadow.svg); 
    }
}

= SVG file ==============================================
<?xml version="1.0">
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" rx="5" style="fill:#666666;" />
</svg>

以上是关于CSS CSS Rounded Corners没有图像支持Firfox，Safari，Chrome，Opera的主要内容，如果未能解决你的问题，请参考以下文章

CSS 高级CSS ROUNDED CORNERS

css select2.square.corners.css

如何在 vscode 上为 css 模块设置更漂亮

顺风CSS渐变问题

Tailwindcss：语法错误：`hover:rounded-xl` 类不存在

android 圆角边框 阴影边框怎么设置