Webフロントエンド開発者はCSS属性を必ず知っている

1.フィレット効果
現在のWebデザインは最新の開発技術に追随しつつあり、HTML 5を用いて多様なWebアプリケーションを開発している.HTML 5の利点の1つは、以前に画像で実現しなければならなかった要素が、コードで実現できるようになったことです.
「border-radius」は、HTML要素のフィレットを直接定義し、すべての現代ブラウザでサポートできる機能を実現する重要な属性です.
Cssコード

border-radius: 10px; /* CSS3 Property */

-moz-border-radius: 10px;  /* Firefox */

-webkit-border-radius: 10px; /* Chrome/Safari */

-khtml-border-radius: 10px; /* Linux browsers */

2.シャドウ効果
CSS 3のbox-shadow属性によりシャドウ効果を非常に容易に実現できる.すべての主流のブラウザはこの属性をサポートしており、Safariブラウザは接頭辞付き-webkit-box-shadow属性をサポートしています.
Cssコード

-moz-box-shadow: 20px 10px 7px #ccc;

-webkit-box-shadow: 20px 10px 7px #ccc;

box-shadow: 20px 10px 7px #ccc;



*     JavaScript       

　object.style.boxShadow=”20px 10px 7px #ccc”
3.@media属性
Mediaプロパティは、同じスタイルシートの異なる画面でのスタイルを設定するために使用されます.このスタイルを適用するメディアまたはメディアをプロパティ値で指定できます.
Cssコード

@media screen and (max-width: 480px){
/*       480px         */

4.グラデーション塗り
CSS 3のGradient(グラデーション)属性は開発者にもう一つの驚くべき体験を与えた.Gradientはまだすべてのブラウザでサポートされていないため、Gradientに完全に依存してレイアウトを設定することはできません.
Cssコード

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));

5.  Background size
Background sizeはCSS 3で最も重要な属性の一つであり、多くのブラウザでサポートされている.Background sizeプロパティは、背景画像のサイズを設定するために使用されます.従来は背景画像のサイズはスタイルでは制御できなかったが,Background size属性の1行のコードを用いることでユーザが望む背景画像効果を実現できるようになった.
Cssコード

background:url(bg.jpg);

background-size:800px 600px;

background-repeat:no-repeat;

6、Overflow:hiddenはフローティングをうまく処理できず、フローティングをよりよく処理するソリューションを提供した.
Cssコード

display: inline-block;

7、 Overflow: hidden
Overflow:HiddenというCSS属性はオーバーフロー機能を隠すほか、フローティングをクリアする役割もあります.
Cssコード
 

overflow:hidden;