痛い
1. マウスをウェブページ内に移動させると消えます = =
*{ カーソル:NOE!重要; }2. 単純なテキストのぼかし効果
*{ 色:透明; テキストシャドウ:#111 0 0 5px; }![]()
3. 多重国境
.div { box-shadow: 0 0 0 6px RGBA(0, 0, 0, 0.2), 0 0 0 12px RGBA(0, 0, 0, 0.2), 0 0 0 18px RGBA(0, 0, 0, 0.2), 0 0 0 24px RGBA(0, 0, 0, 0.2); 高さ:200ピクセル; マージン:50px auto; 幅:400px}![]()
4. リアルタイムでのCSS編集
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. CSSにおける単純な操作
.div{ width: calc(100% - 500px); }![]()
6、国境半径
基本的に多くの人がこう使っているからです:
.div { border-radius: 4px; }![]()
もう少し高級な例はこうです:
.div { border-radius: 4px 6px 6px 4px; }![]()
しかし、究極のブラックテクノロジーはこう使われます:
.div { border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
border-radius 8つの値を割り当てることができます:
スラッシュの前は横方向に、後方は縦方向に影響します。
それぞれの数字は4つの異なる方向を表しています。
7、アウトラインオフセット
入力の下でCSSを書く際には、以下の文に慣れているでしょう。
input { outline : none; }input:focus { アウトライン : なし; これは入力ボックスからデフォルトの青いワイヤーフレームを削除する方法です。
CSSにはデフォルトワイヤーフレームの距離を設定できるアウトラインオフセットプロパティもあります:
input { outline-offset: 4px ; }(ウェブフロントエンド学習交流グループ:328058344 世間話は禁止、気に入らなければ入らない! 属性値のサイズを調整すると、輪郭線の距離変化が確認できます。
最後に、ビッグホワイトのデモを事実の前に紹介します
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> ボディ { 背景:#595959; } #baymax{ /* は中央*/余白:0 auto; /*高さ*/ 高さ:600ピクセル; /*オーバーフローを隠す*/ オーバーフロー:隠し; } #head{ 身長:64px; 幅:100px; /*丸角の形状をパーセンテージ*/境界半径:50%で定義してください; /*背景*/ 背景:#fff; マージン:0 オート; マージン-ボトム:-20px; /*下縁のスタイルを設定する*/ border-bottom: 5px 実 #e0e0e0; /*属性は要素の積み重ね順序を設定します。 スタック順序が高い要素は常に、スタック順序が低い要素の前に位置します*/zインデックス:100; /*相対位置要素を生成する*/ 位置:相対的; } #eye, #eye2{ width: 11px; 高さ:13ピクセル; 背景:#282828; 国境半径:50%; 位置:親族; トップ:30ピクセル; 左:27ピクセル; /*要素を回転させる*/transform: rotate(8deg); } #eye2{ /*対称に回転させる*/ transform: rotate(-8deg); 左:69px; トップ:17px; } #mouth{ 幅:38px; 高さ:1.5px; 背景:#282828; 位置:親族; 左:34px; トップ:10ピクセル; } /*胴体と腹部*/ #torso、#belly{ 余白:0 auto; } 高さ:200ピクセル; 幅:180px; 背景:#fff; 国境半径:47%; /*Set border*/ border: 5px 実線 #e0e0e0; ボーダートップ:なし; Z指数:1; } #belly{ 高さ:300px; 幅:245px; マージン-トップ:-140px; Z指数:5; } #cover{ width: 190px; 背景:#fff; 高さ:150ピクセル; マージン:0 オート; 位置:親族; 上:-20px; 国境半径:50%; } /*ハート*/ #heart{ width:25px; 高さ:25px; 境界半径:50%; 位置:相対的; /*境界線の周りに影効果を追加*/ box-shadow:2px 5px 2px #ccc インセット; 右:-115px; トップ:40px; Z指数:111; border:1px ソリッド #ccc; } /*腕*/ #left 腕、#right 腕{ 高さ:270px; 幅:120px; 国境半径:50%; 背景:#fff; マージン:0 オート; 位置:親族; 上限:-350px; 左:-100px; トランスフォーム:回転(20度); z指数:-1; } #right-arm{ transform: rotate(-20deg); 左:100ピクセル; トップ:-620px; } /*指*/ #l ビッグフィンガー、#r ビッグフィンガー{ 高さ:50px; 幅:20px; 国境半径:50%; 背景:#fff; 位置:親族; トップ:250ピクセル; 左:50px; トランスフォーム:回転(-50度); } #r-ビッグフィンガー{ 左:50px; トランスフォーム:回転(50度); } #l スモールフィンガー、#r スモールフィンガー{ 身長:35px; 幅:15px; 国境半径:50%; 背景:#fff; 位置:親族; トップ:195ピクセル; 左:66px; トランスフォーム:回転(-40度); } #r-スモールフィンガー{ 背景:#fff; トランスフォーム:回転(40度); トップ:195ピクセル; 左:37px; } /*太もも*/ #left 脚、#right 脚{ 高さ:170px; 幅:90ピクセル; 境界半径:40% 30% 10px 45%; 背景:#fff; 位置:親族; 上:-640px; 左:-45px; 変換:回転(-1度); Z指数:-2; マージン:0 オート; } #right-leg{ 背景: #fff; 国境半径:30% 40% 45% 10px; マージン:0 オート; 上:-810px; 左:50px; トランスフォーム:回転(1度); </style><body> } <div id="baymax"> <!-- 2つの目を含む頭部を定義し、口を --> <div id="head"> <div id="eye"></div> <div id="eye2"></div> <div id="口"></div> </div> <!-- 心臓を含む胴体を定義します --> <div id="torso"> <div id="heart"></div> </div> <!-- 腹部、カバー(および胴体の接合部を含む)を定義します --> <div id="belly"> <div id="cover"></div> </div> <!-- 左腕を定義し、2本の指(大きい指と小さい指)を含みます。> <div id="left-arm"> <div id="l-ビッグフィンガー"></div> <div id="l-smallfinger"></div> </div> <!--右腕を定義します。右腕には大きな指と小指も含まれます。--> <div id="右腕"> <div id="r-ビッグフィンガー"></div> <div id="r-smallfinger"></div> </div> <!-- > <div id="left-leg"を定義></div><!--右脚--> <div id=「右脚」></div> </div></body><html>![]()
|
掲載地 2017/12/04 20:24:39
|
|
|
|
掲載地 2017/12/05 9:10:05
|
掲載地 2017/12/05 9:21:19
