css-ボーダー-グラデーション

html部分 

<div class="content"></div>

CSS部分 

1. 四辺すべてにグラデーションを付ける 

マージン: 50ピクセル; 
幅: 100ピクセル; 
高さ: 100ピクセル; 
ボーダー:10px ソリッド #ddd; 
境界画像: -webkit-linear-gradient(red, yellow) 30 30; 
境界画像: -moz-linear-gradient(red, yellow) 30 30; 
境界画像: 線形グラデーション(赤、黄) 30 30;

 

2. 1 つのエッジのグラデーション

.content {
  マージン: 50px; 
  幅: 100ピクセル; 
  高さ: 100ピクセル; 
  ボーダー:10px ソリッド #ddd; 
  背景クリップ:パディングボックス、ボーダーボックス; 
  背景原点:パディングボックス、ボーダーボックス; 
  背景画像:線形グラデーション(135度,#ddd,#ddd),線形グラデーション(135度,#E70303,#FFFF44); 
  border-bottom:10px の透明なソリッド。

}