ホームページ > 記事 > ウェブフロントエンド > Css3 のクールな使い方_html/css_WEB-ITnose
Css3 のクールな使い方_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:38:351262ブラウズ
CSS3 セレクターから始めましょう:
E F: すべての子孫要素;
E+F: E 要素の後に最も近いセレクター;
E~F: すべてE 内の後続の兄弟要素 (CSS3 にはそれ自体も含まれませんし、先頭も含まれません)
att*=val: 指定された要素文字 (val1、val2 など) が含まれている限り
att^=val; : 最初の文字と一致します;
att$=val: 最後の文字と一致します;
att~=val: スペースで区切られ、そのうちの 1 つは val です。 -" Connector;
CSS3 pseudo-class selector: first-line first-letter root not empty target before after first-child last-child nth-child(2) nth-last-child(odd) ;
Shadow : box-shadow :水平オフセット px 垂直オフセット px 影のぼかし値 color
box-shadow:3px 4px 2px #000;
： ttle: 5px -10px 5px ▲ Clip: 背景のクリッピング領域。背景- origin: は、background-position 属性を指定する参照座標の開始位置です。background: -webkit-gradient(linear, 0, 0, 0, 100%, from(#fff) , to(#000));
丸い境界線: border-radius:10px 15px 20px 25px;
0px 25px; // 横4つで10、縦2つで20、2つで25
楕円の描き方: use幅の半分を水平半径として、高さの半分を垂直半径として
メディアクエリ: メディアクエリ:
4998edde53094fe75cd5b5bf77cffcd5 user-scalable:0 では手動スケーリングが許可されません
eba75ec4aa4275f2339ee596dafbc8fb 画面の表示領域の幅と長さが 600px から 900px の間の場合、small.css: @media screen と (min-width:600px) を適用します。 and (max-width:900px) {//...}
9a0eddf47b59b2b79528778ffd79f60bこのモードが適用されますモバイル デバイスがポートレート モードの場合、ランドスケープはランドスケープです
Border 属性 border-image-source:url(./ ***.png);// 画像が 81*81 で、それぞれが 8181 であると仮定します。 9 の規則は 27*27 です
border-image-width: 27px;
border-image-slice: 27; //Four 27*2=54 の場合、角は 9 つの点のうちの 1 つだけを表示します。 9 つのポイントのうち 4 つを表示します。81 の場合は 9 を表示し、幅の 3 倍にカットします
border-image-outset: 0px; //ボーダーの外側の拡張サイズ
border-image-repeat:stretch; ; //ストレッチリピートリピートモード、真ん中の2468が繰り返されます
Reflectionattribute-webkit-box-reflect:above/below/left/right 100px -webkit-linear-gradient(top,transparent,#fff)
トランジション: あるトランジションから別のトランジションにゆっくりと移行する効果 -webkit-transition:padding 1sease-out,color 1s Linear 1s;
4 つのパラメーター (transition property-property、transition time-duration、transition form-timing-function、遅延時間-遅延)
アニメーションアニメーションパラメータ (name-name、-duration 遷移時間、timing-関数遷移形式、-lay 遅延時間、-iteration-count サイクル数、-direction is reversed、-play-state アニメーション状態, -fill-mode アニメーション時間外の状態)
-webkit-animation:demo 2s Linear 3s 3
@-webkit -keyframes Demon {
0% {opacity:0;transform:translate(0px)} //透明度translation
20% {opacity:0.2;transform:translate(20px)}
40% {opacity:0.4;transform:translate(40px)}
60% {opacity:0.6;transform:translate(60px)}
100% {opacity:1;transform:translate(100px)}
}
ポップアップウィンドウアニメーションのアニを付ける
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>tan</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> .result-bg{ position:fixed;top:0;left:0; width:100%;height:100%; background-color:rgba(0,0,0,0.5); z-index:20 } .result{ display:block; position:absolute;top:0;left:0; z-index:21; width:16rem } .result.tan{ -webkit-animation:bouncein .8s ease-out backwards; -moz-animation:bouncein .8s ease-out backwards; -ms-animation:bouncein .8s ease-out backwards; animation:bouncein .8s ease-out backwards} @-webkit-keyframes bouncein{ 0%{opacity:0;-webkit-transform:scale(0.3)} 50%{opacity:1;-webkit-transform:scale(1.05)} 70%{-webkit-transform:scale(0.9)} 100%{-webkit-transform:scale(1)} } @keyframes bouncein{ 0%{opacity:0;transform:scale(0.3)} 50%{opacity:1;transform:scale(1.05)} 70%{transform:scale(0.9)} 100%{transform:scale(1)} } </style> </head> <body> <div class="result-bg J-result-bg"></div> <img class="result J-result tan" src="http://b0.hucdn.com/party/default/89f818525d6539038a89e21235c3dd59.png"> </body></html> -webkit-css:
-webkit-user-select:none 選択したページのコンテンツを禁止するために使用できます。Web サイトのコンテンツをユーザーによる使用から保護するために使用されます。情報の著作権を保護するためにコピーおよび転載します。
在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
-webkit-touch-callout:none 在iPhone或者iPad上，当你触摸并按住触摸的目标，这个属性可以让你禁用系统默认菜单。 为default 是默认弹出系统框
-webkit-line-clamp:d2c1e15f2758ae4ead444247148d09ea 多行文本溢出显示省略号
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。
如何解决多行显示省略号呢？
WebKit浏览器或移动端的页面可以采取 -webkit-line-clamp 它是一个 不规范的属性，它没有出现在 CSS 规范草案中。 它需要组合其他外来的WebKit属性。常见结合属性：
A. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
B. -webkit-box-orient :vertical;必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
C. text-overflow:ellipsis，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
跨浏览器兼容的方案：
p { position:relative; line-height:1.4em; /* 3 times the line-height to show 3 lines */ height:4.2em; overflow:hidden; } p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px; background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y; }
这里注意几点：
-
-
-
- height高度是line-height的倍数，几行就是几倍；
- 结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
- IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用5ba58fdc612f1fc136f6b4bee7e3f862...54bdf357c58b8a65c66d7c19c8e4d114去模拟；
- 要支持IE8，需要将::after替换成:after；
-
-
-webkit-overflow-scrolling:touch 滑动很顺滑 在iOS 5+上促使一个元素类似Native的快速滚动和回弹的效果
.selector { overflow: auto;/* auto | scroll */ -webkit-overflow-scrolling: touch;}
-webkit-text-size-adjust:100% iOS浏览器横屏时会重置字体大小 横竖屏时候字体自己跟着自适应，PC端此属性已经除去
-webkit-tap-highlight-color -webkit-tap-highlight-color 只用于iOS (iPhone和iPad)和Android。在你点击一个3499910bf9dac5ae3c52d5ede7383485或者利用Javascript生成的可点击元素的时候，它就会出现一个半透明的灰色背景。
通过-webkit-tap-highlight-color，可以设置该属性为任何颜色。:-webkit-tap-highlight-color:transparent在Android下无效，透明可以通过rgba(0,0,0,0)实现。
-webkit-appearance:none 内阴影 为none改变按钮在iPhone下的默认风格 在IE系列和Opera浏览器上不支持“appearance”，而且Safari也只有3.0版本以上支持，而在Chrome和Firefox以及移动设置浏览器上得到较好的支持。
appearance的属性值 checkbox radio button listbox listitem等等 例如设置button的话 会让一段文字看起来像个button
border-radius Android 2.3:border-radius 在自带浏览器中不支持 %
Android 4.2.x:border-radius + border + 背景色，在自带浏览器中背景色溢出到圆角以外部分=>使用四个拓展最后一个合并
Transform Quoteについて話しましょう http://www.cnblogs.com/jingwhale/p/4639541.html
logCSS
| transform | 要素に2Dを適用したり、3D変換したりします。 | 3 | |||||||||||||||||||||||||||||||||||||||||||||||
| transform-origin | 変換された要素の位置を変更できます。 | 3 | |||||||||||||||||||||||||||||||||||||||||||||||
| translateX(n)translateY(n ) | X 軸または Y 軸に沿って要素を移動します。 | ||
| translate(x,y) | X 軸と Y 軸に沿って要素を移動します。 | 値translate(50px,100px)は、要素を左から50ピクセル、上から100ピクセル移動します。 | div{ |
| -webkit-transform:transform(50px,100px); /* Safari Chrome */ -o-transform: translation(50px,100px); |
|||
| scaleX(n) | scaleY(n) | 要素の幅または高さを変更します。
| 値scale(2,4)は、幅を元のサイズの2倍に、高さを元の高さの4倍に変換します。 |
| transform:scale(2,4);-ms-transform:scale(2,4); /* IE 9 */-webkit-transform:scale(2,4); /* Chrome */ | -o-transform:scale(2,4); /* Opera */-moz-transform:scale(2,4); /* Firefox */ | }||
| | rotate(angle) | ||
| valuerotate(30deg) 要素を時計回りに 30 度回転します。 | div{ transform: 回転(30度); -ms-transform: 回転(30度); /* IE 9 */-webkit-transform: 回転(30度); /* SafariとChrome */ | skewX(角度)skewY(角度) | |
| skew(x-angle,y-angle) | |||
| 値 skew(30deg,20deg) は、要素を X 軸を中心に 30 度、Y 軸を中心に 20 度反転します。 | div{ | transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg) /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari Chrome */-o-transform: skew(30deg,20deg); /* Opera */ |
|
| matrix(n,n,n,n,n,n) | 6 つの値の行列を使用して 2D 変換を定義します。 | matrix() メソッドは、すべての 2D 変換メソッドを組み合わせます。 | matrix() メソッドは 6 つのパラメーターを受け取り、要素の回転、拡大縮小、移動、傾斜を可能にする数学関数が含まれています。|
| 行列メソッドを使用して div 要素を 30 度回転します | div{ | transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5, -0.5 ,0.866,0,0); /* IE 9 */ | -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */-webkit-transform:matrix (0.866 ,0.5,-0.5,0.866,0,0); /* Safari と Chrome */ | -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
| これらの CSS3 の使用法を自分で試してみるのが最善です |
|||