HTML/CSS フロントエンドでのテキスト境界線のシャドウ効果の実装例の共有

シャドウ効果の使用は開発においてますます広く普及しているため、今日は同じテクニックを使用して境界影を実現する方法について説明します。以下に、Script House のエディターがテキスト境界線の影効果を実現するための Html/CSS フロントエンドを提供します。必要な方は参考にしていただければ幸いです。

1. ボーダーシャドウ

box-shadow ボーダーシャドウ

パラメーター: パラメーター 1 x-shadow: オブジェクトのシャドウの水平オフセット値を設定します。単位は px、em、パーセントなどで、負の値も許可されます。 。パラメータ 2 y-shadow: オブジェクトの影の垂直オフセット値を設定します。単位は px、em、またはパーセントなどです。負の値も許可されます。パラメータ 3 ブラー: 境界線の影の半径サイズを設定するために使用されます。パラメータ 4 スプレッド: 半径を拡張し、影のサイズを設定します。このパラメータはオプションであり、デフォルト値は 0 です。パラメータ5 color: 影の色を設定します。パラメータ 6 inset: このパラメータはデフォルトでは設定されていません。デフォルトは外側のシャドウで、インセットは内側のシャドウを意味します。

box-shadow: x シャドウ y シャドウ ブラー スプレッド カラー インセット

エフェクト 1

エフェクト 2

HTML 構造 CSS スタイル フォント スタイル フォントの色 ボーダー シャドウ 具体的なコードを見てみましょう:

HTML:

<p class="box">box-shadow</p>

CSS:

.box{
    width:300px;
    height:150px;
    background: deepskyblue;
    font:30px/150px 'Microsoft YaHei';
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin:100px auto;
    /*边框阴影*/
    /*效果1*/
    box-shadow: inset 5px 5px 20px #ccc;
    /*效果2*/
    box-shadow: inset 5px 5px 20px pink,5px 5px 20px #000;
}

関連する推奨事項:

CSS3 の box-shadow 属性を使用して作成する方法境界線の影の効果

css3 丸い境界線、境界線の影_html/css_WEB-ITnose

css で境界線の影の効果を実現_html/css_WEB-ITnose

以上がHTML/CSS フロントエンドでのテキスト境界線のシャドウ効果の実装例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。