ホームページ > 記事 > ウェブフロントエンド > Webフロントエンド学習12日目・格闘_CSSのレイアウトと配置の使い方(2)_html/css_WEB-ITnose
Webフロントエンド学習12日目・格闘_CSSのレイアウトと配置の使い方(2)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:16:49992ブラウズ
最近フォロワーが増えているのはアバターのせいだと聞いたので変更してみました。
フォロワーが増えるのは女の子だからという話も聞いたので、無関心でいられなくなって、フォロワーさんはみんな男の子ですか？
ハーレムで三千人の美女を抱えた男になりたい〜
ユーザーインターフェーススタイル
outline 複合属性（outline-width、outline-style、outline-color）、設定オブジェクトの外側の線のアウトライン。輪郭は境界線の外側に描画されます。
使用頻度は平均的で、H5での使用は推奨されません。
構文はborderの使用と似ています。
サンプルコードは以下の通りです:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>outline设置对象外的线条轮廓</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:5px dashed red;10 outline:10px solid green;11 width:100px;12 height:100px;13 text-align:center;14 }15 </style>16 </head>17 <body>18 <div>19 20 </div>21 </body>22 </html> 実行結果:
cursor オブジェクト上を移動するマウスポインタによって使用される、システムの定義済みカーソルの形状を設定します。
使用頻度は普通です。
構文: カーソル: [9bb6a7d109b3f2bf35f7e2e9bd87f98a (カーソルの種類としてカスタム画像を使用します。IE と Opera は .cur 画像形式のみをサポートします。Firefox、Google、Safari は一般的な画像形式もサポートします) [5b9dd43a32a43128ec18aa4963aab5c6 | y>]*[ デフォルト | カーソルの移動は許可されません | e-resize | s-resize | ns-resize | Resize | row-resize | all-scroll]
ゲームではカスタム画像をマウスポインタとして使用するのが一般的で、ほとんどの Web サイトではシステムによって事前に定義された画像のみが使用されます。
サンプルコードは以下の通りです:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>CursorDemo设置鼠标光标的形状（如手型或箭头）</title> 6 <meta charset="utf-8" /> 7 8 </head> 9 <body>10 <ul>11 <li>12 <h3>cursor：default默认箭头型</h3>13 <input type="button" value="箭头" style="cursor:default" />14 </li>15 <li>16 <h3>cursor：pointer手型</h3>17 <input type="button" value="手型" style="cursor:pointer" />18 </li>19 <li>20 <h3>cursor：text文本光标</h3>21 <input type="button" value="文本光标" style="cursor:text" />22 </li>23 </ul>24 </body>25 </html>
実行結果:
zoom オブジェクトのズーム率を設定します。
構文：zoom:normal（通常表示） | d80b5def5ed1be6e26d91c2709f14170（数値を指定、マイナス値は不可）
サンプルコードは以下の通りです。
実行結果: