一步一腳印工作札記

CSS3 中有時想針對字體的顏色及字體邊線做些處理，stroke 就是個好方法，底下的範例相信能帶來一點心得 ^^ HTML: <div class="dv">1234567890</div> CSS: .dv{     font-size:50px;  -webkit-text-fill-color: red;   // 字體填充顏色  -webkit-text-stroke-color: yellow;   //字體邊界顏色  -webkit-text-stroke-width: 0.92px;   //字體邊界寛度 }

CSS3 裡面的 clip-path 可用來剪裁圖片，下面是個簡單的範例 HTML: <img src="http://lh5.ggpht.com/_0tibDhJQ0Og/S6b6TkEMaNI/AAAAAAAARXg/Elrs6s7s0ds/s800/ar025.jpg"></img> CSS : img { width: 280px; height: 280px; background: #ff90ff; clip-path: inset(Top Right Bottom Left);   // Top為從上往下剪裁的方向，依此類推，使用百分比做為縮剪的比率 ex: clip-path: inset(40% 40% 50% 10%) } // 如果要剪裁成圓形，可改為下列語法 clip-path: circle(半徑大小 at X-alias Y-alias);  // ex: circle(50% at 50% 50%) /* Center the demo */ html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; }

一般要透過 CreateElement 或 HTML append、InnerHTML 動態加入 SVG 內容會產生問題 (SVG 是 xmlns ，而非 HTML 元素)，以下使用  createElementNS 進行轉換後就行了，趕快做個記錄吧.. HTML: <svg id="s"xmlns="http://www.w3.org/2000/svg"/> JS: function makeSVG(tag, attrs){   var el = document. createElementNS ('http://www.w3.org/2000/svg', tag); for (var k in attrs) el.setAttribute(k, attrs[k]); return el; } var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'yellow'});           document.getElementById('s').appendChild(circle);

使用 CSS 時，難免要針對某些相同元素但又不同位置去做變化，如單行要顯示藍底，雙數行要顯示紅底，類似這種例子，到底要用 nth-chiild ? 還是 nth-of-type呢?其實了解之後就很簡單了 使用 nth-child 針對所有元素位置判斷，如以下CSS nth-child(odd){   color:red; } <p>A1</p> <hr/> <p>A1</p> <p>A1</p> 得到的結果是 A1 -------- A1 A1 那是因為中間多了一個 <hr/> 使得第二個<p> 成為了奇數行，那如果要讓奇數的 A1 變成紅色怎麼辦呢? nth-of-type(odd){   color:red; } <p>A1</p> <hr/> <p>A1</p> <p>A1</p> 得到的結果是 A1 -------- A1 A1 結論是使用 nth-of-type 才會對相同的元素做處理，^^ 很有意思吧

第一次學 React 難免會覺得有點不習慣，寫個範例來幫忙記憶 & 了解吧......... Result(結果): Your Name HTML: <div class="content"></div> JS ( 記得額外載入 react.js & ReactDOM.js ) // 第一個元件 CommentList (父元件) var CommentParent = React.createClass( {   render:function(){      return(<CommentSon author="Your Name"></CommentSon >) // 這裡是實作呼叫子元件 }}) // 第二個元件 CommentSon (子元件) var CommentSon = React.createClass({   render:function(){     return(        <h2>{this.props.author}</h2>   // 利用 props 來取得父元件中的 author 屬性內容       )   } }); ReactDOM.render(    <CommentParent />,   document.querySelector('.content') )