HTML/CSS フロントエンドでのテキスト境界線のシャドウ効果の実装例の共有-CSSチュートリアル-php.cn

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

小云云

リリース： 2018-01-17 17:20:18

オリジナル

4632 人が閲覧しました

シャドウ効果の使用は開発においてますます広く普及しているため、今日は同じテクニックを使用して境界影を実現する方法について説明します。以下に、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;
}

ログイン後にコピー