2

IE8 で border-radius を実装するには、border -radius.htcを使用します。

realzovat 境界半径が正しく機能するブロック:

.mc-button
{
    -moz-transition: all 0.218s ease 0s;
    -moz-user-select: none;
    background-color: #CBCBCB;
    background-image: -moz-linear-gradient(center top , #CBCBCB, #DCDCDC);
    border: 1px solid #DCDCDC;
    color: #FFFFFF;
    cursor: default;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    min-width: 70px;
    padding: 0 8px !important;
    text-align: center;
    overflow: visible;
    font-family: inherit;
    font-size: inherit;
    float: left;
    text-decoration: none;
    display: block;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-outline-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: Arial, Sans-Serif !important;
    behavior:url(Content/border-radius.htc);
}

添付ファイルのリストによると - border-radius.htcはページに接続します

問題の解決方法を教えてください。

更新 (2012 年 6 月 13 日)

コードがボタンに置​​き換えられた場合:

.mc-button
{
    border: 1px solid #696;
    height: 29px;
    line-height: 29px;
    min-width: 70px;
    text-align: center;
    padding: 0 8px !important;
    overflow: visible;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    float: left;
    display: block;
    background: #00ADEE;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00ADEE), to(#0078A5));
    background: -webkit-linear-gradient(#00ADEE, #0078A5);
    background: -moz-linear-gradient(#00ADEE, #0078A5);
    background: -ms-linear-gradient(#00ADEE, #0078A5);
    background: -o-linear-gradient(#00ADEE, #0078A5);
    background: linear-gradient(#00ADEE, #0078A5);
    -pie-background: linear-gradient(#00ADEE, #0078A5);
    behavior: url("Content/PIE.htc");
}

そして次のように宣言します。

<a id="login_button" class="mc-button mc-button-submit ">SomeText</a>

.mc-button-submit
{
    border: 0px solid #0076A3;
    background: #00ADEE;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00ADEE), to(#0078A5));
    background: -webkit-linear-gradient(#00ADEE, #0078A5);
    background: -moz-linear-gradient(#00ADEE, #0078A5);
    background: -ms-linear-gradient(#00ADEE, #0078A5);
    background: -o-linear-gradient(#00ADEE, #0078A5);
    background: linear-gradient(#00ADEE, #0078A5);
    -pie-background: linear-gradient(#00ADEE, #0078A5);
    color: #FFFFFF;
    text-align: center;
}

丸めると消えます。.mc-button-submit行の動作に追加: url ("Content / PIE.htc"); 助けにならない。

2 番目のクラスを背景のパラメーターに接続する方法を教えてください。

4

3 に答える 3

3

スタンドアロンの.htcハックは、バックグラウンドgradientでborder-radius同時に機能しません。

cssgradientをシンプルな画像に置き換えてみてください。このトリックはうまくいきます。

また、css3pie.htcを使用することもできます (@dop-trois に感謝) — この純粋な Javascript ツールは、スタンドアロンファイルよりも完璧です。

PS。Insetbox-shadowは両方のソリューションで実装できません。

PPS:必要なコードは次のとおりです: (より有効で正しいものにするために少し変更しました):

.mc-button {
    font: bold 11px/29px Arial, Helvetica, sans-serif !important;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;

    border: 1px solid #DCDCDC;
    height: 29px;
    min-width: 70px;
    padding: 0 8px !important;
    overflow: visible;
    display: block;

    float: left;

    /* Unique link for this gradient — http://www.colorzilla.com/gradient-editor/#cbcbcb+0,dcdcdc+100;Custom */
    background-color: #CBCBCB;
    background: -moz-linear-gradient(top,  rgba(203,203,203,1) 0%, rgba(220,220,220,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,203,203,1)), color-stop(100%,rgba(220,220,220,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(203,203,203,1) 0%,rgba(220,220,220,1) 100%); /* W3C */

    /* css3 stuff below: (via css3please.com) */
    /* no one prefix except `-webkit` is needed nowadays for `border-radius` */
    -webkit-border-radius: 5px;
            border-radius: 5px;
    -webkit-transition: all 0.218s ease-out;
       -moz-transition: all 0.218s ease-out;
        -ms-transition: all 0.218s ease-out;
         -o-transition: all 0.218s ease-out;
            transition: all 0.218s ease-out;

    /* PIE specific accordingly http://css3pie.com/documentation/q-and-a/ */
    behavior: url(PIE.htc);
}

PIE.htc正しくインクルードしたことを確認する必要があります(重要!)。

関連する質問

したがって、回答の可能性がある問題は、MIME タイプ (「text/x-component」) にある可能性があります。

また、可能な解決策は次のとおりです。

position: relative;
z-index: 0;
于 2012-06-09T13:47:18.307 に答える
2

グラデーションとボーダー半径を適用するには、CSS3 Pieをお勧めします。CSS3 プロパティを IE に適用するのは、私が知っている中で最も強力なツールです。

IE でグラデーションを適用する):

#myElement {
    background: #CCC; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/
    background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#CCC, #EEE); /*PIE*/
    behavior: url(PIE.htc);
}​

IE で境界半径を適用します):

#myAwesomeElement {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(path/to/PIE.htc);
}​

動作させるにはPHPが必要です。

CSS3 Pie の Web サイトでのライブ デモ。

ところで: このツールを使用すると、border-radius とグラデーションを同時に適用できます ;)

お役に立てれば ：）

于 2012-06-09T14:00:23.880 に答える
0

グラデーション、ボックス シャドウ、Border-radius を適用するには、CSS3 Pie をお勧めします。cook&smile プロジェクトで使用しましたが、IE で完全に動作します。

*{ behavior:url(path/PIE.htc);}

.border_radius_div{ position:relative; -webkit-border-radius: 10px; -moz-border-radius: 10px;  border-radius: 10px;}

.gradient_div{ position:relative; 
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33); }

この Web サイトにアクセスして、さらに詳しく調べてください。

http://css3pie.com

ノート：

  1. 境界半径、グラデーション、およびボックス シャドウを使用している場合は、位置 (相対または絶対) を使用することを忘れないでください。

  2. 使用することを忘れないでくださいbehavior:url(xhtml_folder/PIE.htc);

  3. 重要なことは、PIE.htc を xhtml フォルダーに入れることを忘れないことです。
于 2013-01-13T10:52:56.400 に答える