0

私はCSS3で遊んでいて、角が切り取られたボックスを作成しています。

コードは次のとおりです。

.boxcornerscutted {
background: #ffffff;
background:
    -moz-linear-gradient(45deg,  transparent 10px, #ffffff 10px),
    -moz-linear-gradient(135deg, transparent 10px, #ffffff 10px),
    -moz-linear-gradient(225deg, transparent 10px, #ffffff 10px),
    -moz-linear-gradient(315deg, transparent 10px, #ffffff 10px);
background:
    -o-linear-gradient(45deg,  transparent 10px, #ffffff 10px),
    -o-linear-gradient(135deg, transparent 10px, #ffffff 10px),
    -o-linear-gradient(225deg, transparent 10px, #ffffff 10px),
    -o-linear-gradient(315deg, transparent 10px, #ffffff 10px);
background:
    -webkit-linear-gradient(45deg,  transparent 10px, #ffffff 10px),
    -webkit-linear-gradient(135deg, transparent 10px, #ffffff 10px),
    -webkit-linear-gradient(225deg, transparent 10px, #ffffff 10px),
    -webkit-linear-gradient(315deg, transparent 10px, #ffffff 10px);

padding:9px 9px;
margin-top: -30px;
margin-bottom: -15px;
}

div.boxcornerscutted {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
     background-size: 50% 50%;
     background-repeat: no-repeat;
}

Chrome、Opera、Safari、Mozillaで完全に動作しますが、IEでは（明らかに）問題があります。IEで同じ（または同様の効果）を再現する方法のヒントはありますか？

4

2 に答える 2

1

グラデーションは IE 6/7/8/9 では機能しません。http://css3pie.com/を使用してみてください

CSS3 PIEにより、Internet Explorer 6 ～ 9 は、最も便利な CSS3 装飾機能のいくつかをレンダリングできるようになります。

グラデーション パターンとコード例のデモをチェックしてください。http://css3pie.com/demos/gradient-patterns/

于 2012-11-04T10:08:57.170 に答える
1

JavaScript とjQuery コーナーを使用して実現できますが、純粋な CSS では実現できません。

これ-ms-linear-gradientは IE に最も近いものですが、IE10 でのみサポートされています。

以前の IE バージョンは、 と を使用しfilter:progid:DXImageTransform.Microsoft.gradient( ... );た単純なグラデーションをサポートしてfilter:ms-linear-gradient( ... );いますが、この種のグラデーションはサポートしていません。

于 2012-11-04T10:12:41.157 に答える