ホームページ > 記事 > ウェブフロントエンド > フロントエンド開発における一般的なヒントのまとめ_html/css_WEB-ITnose
フロントエンド開発における一般的なヒントのまとめ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:43:27777ブラウズ
1. 余分な部分の表示省略を制御します (単一行):
white-space: nowrap;text-overflow:ellipsis;overflow: hidden;
以下は、css3 を使用して、複数行の余分な部分の表示省略を制御します (ここでは Google カーネル ブラウザーに適応しています)。
overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;/* 设置最高值，防止超出部分显示出来 */max-height: 30px;
2. ラベルの背景を透明にし、コンテンツを不透明にします:
background: rgba(255,255,255,0.6)!important;
3. サーバー側のフォントを呼び出します:
@font-face{ font-family: "自定义字体名"; src:url('自定义字体名.ttf')format('opentype'); /* 指定自定义字体的格式 */ } span{ font-family: "自定义字体名"; font-size: 36px; }
4 . css3 を使用してグラデーションカラーを実現します (ここでは Google カーネル ブラウザに適応しています):
.shade{ width: 300px; height: 100px; /* 对背景实现渐变 */ background: -webkit-gradient(linear,0 0 ,0 100%,from(rgba(255, 255, 255, 0.1)),to(rgba(255, 163, 204, 0.5))); }
5.css3 は画像の垂直方向と水平方向のセンタリングを実現します (ここでは Google および Firefox カーネル ブラウザに適応しています):
<style type="text/css"> .content{ display: box; display: -webkit-box; display: -moz-box; -webkit-box-pack:center; -moz-box-pack:center; -webkit-box-align:center; -moz-box-align:center; border: 1px solid red; width: 600px; height: 500px; }</style><body> <div class="content"> <img src="1.jpg" alt=""> </div></body>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。