ホームページ >ウェブフロントエンド >htmlチュートリアル >珍しい CSS 属性の使用_html/css_WEB-ITnose
珍しい CSS 属性の使用_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:30:271196ブラウズ
1. クリップ属性のトリミング - 他の領域を削除して透明にします
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css</title><style>.clip{ width:200px; height:200px; background:#09F; position:relative;}.clip div{ position:absolute; left:0px; top:0px;width:200px; height:200px; background:#0F0;clip:rect(10px 190px 190px 10px);}</style></head><body><h2>clip属性</h2> <div class="clip"> <div>必须将position的值设为absolute或者fixed，此属性方可使用。 </div></div> </body></html> 表示効果:
トリミング値の順序は上、右、下、左であり、達成されるトリミングは
上です: 0-10px (縦座標)
右: 200px-190px (横座標)
下: 200px-190px (縦座標)
左: 0-10px (横座標)
最後は、表示されている緑色の領域で、説明 このプロパティには絶対設定または固定設定が必要です。
IE6 7 と互換性のある記述方法:
*clip:rect(10px,190px,190px,10px);
カンマで区切ります。
2. Rounded border-radius 属性 - 水平方向と垂直方向に個別に定義されます
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css</title><style>.clip{ width:200px; height:200px; background:#09F; position:relative;}.clip div{ position:absolute; left:0px; top:0px;width:200px; height:200px; background:#0F0; border-radius:20px;}</style></head><body><h2>圆角border-radius属性</h2> <div class="clip"> <div></div></div> </body></html> 複合属性、4 つの定義を同時に行うことも、個別に処理することもできます。
効果:
同じ水平半径と垂直半径を表すために各コーナーの値を使用します。コーナーに対して異なる水平半径と垂直半径を定義できます。書き込み方法は値の間/区切りです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css</title><style>.clip{ width:200px; height:200px; background:#09F; position:relative;}.clip div{ position:absolute; left:0px; top:0px;width:200px; height:200px; background:#0F0; border-radius:20px/50px;}</style></head><body><h2>圆角border-radius属性</h2> <div class="clip"> <div></div></div> </body></html> 効果:
3. 背景のクリッピングbackground-clip属性 - フォントの外側がクリップされます
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css</title><style>.clip{ width:200px; height:200px; background:#09F; position:relative;}.clip div{ position:absolute; left:0px; top:0px;width:200px; height:200px; background:#0F0; font-size:50px;-webkit-background-clip:text;}</style></head><body><h2>背景裁剪background-clip属性</h2> <div class="clip"> <div>我是字体</div></div> </body></html> 効果:
この属性はGoogle で有効です。プレフィックスを記述する必要がありますが、フォントを除いて緑色の背景がトリミングされていることがわかります
フォントを透明に設定し、背景をグラデーション カラーに設定すると、グラデーション フォントが作成されます。 。
4. フォントの色 color 属性 - 背景色を表示するには、フォントの色を透明に設定します
効果:
5. 三角形を実現するには、透明に設定します
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css</title><style>.clip{ width:200px; height:200px; background:#09F; position:relative;}.clip div{ position:absolute; left:0px; top:0px;width:200px; height:200px; background:#0F0; font-size:50px;;-webkit-background-clip:text; color:transparent;}</style></head><body><h2>字体颜色color属性</h2> <div class="clip"> <div>我是字体</div></div> </body></html> 効果:
幅と高さを 0 に設定し、次に境界線の色を透明に設定します。これにより、図に示すように黒い三角形が表示され、他の設定を使用できます。
要約すると、色を透明に設定すると、さまざまな小さな効果を実現できます。
6. 文字間隔属性と単語間隔属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css</title><style>.clip{ width:200px; height:200px; background:#09F; position:relative;}.clip div{ position:absolute; left:0px; top:0px;width:0px; height:0px; background:#0F0; font-size:50px; border-top:100px solid #000;border-right:100px solid transparent;border-bottom:100px solid transparent;border-left:100px solid #000;}</style></head><body><h2>边框border属性-设置为透明实现三角形</h2> <div class="clip"> <div>三角</div></div> </body></html> 効果:
コントラストが非常に明白です。
7.white-space 属性 - テキストを折り返さないようにする
height:200px、white-space:hidden; ellipsis ;これらは、この効果を実現するために記述することができる属性です。
7.content 属性 - コンテンツの挿入を実装します
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css</title><style>.clip{ width:200px; height:200px; background:#09F; position:relative;}.clip div{ position:absolute; left:0px; top:0px;width:200px; height:200px; background:#0F0; font-size:14px; }.clip div .n1{}.clip div .n2{ letter-spacing:10px;}.clip div .n3{}.clip div .n4{ word-spacing:10px;}</style></head><body><h2>文字空隙letter-spacing属性和单词空隙word-spacing属性</h2> <div class="clip"> <div> <p class="n1">我是你</p> <p class="n2">我是你</p> <p class="n3">i love you</p> <p class="n4">i love you</p> </div></div> </body></html> 効果: この属性は通常、オブジェクトの処理、コンテンツの挿入、スタイルの定義のために ::beforeh および ::after と組み合わせられます。
デフォルトのクリアフロートでもオブジェクト処理を使用し、最後にコンテンツを挿入してクリアします。
8.writing-mode 属性 - テキスト レイアウト メソッドを実装します
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css</title><style>.clip{ width:200px; height:200px; background:#09F; position:relative;}.clip div{ position:absolute; left:0px; top:0px;width:200px; height:200px; background:#0F0; font-size:20px; line-height:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }</style></head><body><h2>white-space属性-实现文字强制不换行</h2> <div class="clip"> <div> white-space属性-实现文字强制不换行 </div></div> </body></html> 効果: 右から始めて縦に配置されます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css</title><style>.clip{ width:200px; height:200px; background:#09F; position:relative;}.clip div{ position:absolute; left:0px; top:0px;width:200px; background:#0F0; height:200px; }.clip div:after{content:"我是插入的"; position:absolute; right:-50px; top:0px; width:50px; height:50px;}</style></head><body><h2>content属性-实现内容插入</h2> <div class="clip"> <div> </div></div> </body></html> 効果:
左側から垂直に開始します。デモなしのデフォルトは水平です。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。