どうも！LSSです！！
ふと思いついて、これまでに試した２つの小ネタを合体させてみました。
小ネタ＋小ネタ＝あわせても小ネタ、って感じですがｗ
こんな枠、どうでしょう？
と、単なる枠に対する装飾なので、使い方は自由自在！
スマホで見るとまたちょっと形の印象が違うかもです。
コード
<p style="box-shadow: 0px 0px 18px 0px lightgreen inset,-8px -8px 18px 0px lightgreen inset,5px 5px 15px 0px #888888; border-radius: 30%/10%; width: 100%; height: 400px; padding: 28px;">中に入れる文章</p>
元ネタ
上記２つの記事で使ったネタを併用してみました。
box-shadow は、この border-radius で歪んだ形にもちゃんと追従して、影を落としてくれるんですね^^
CSS部分ちょこっと解説
box-shadow:
0px 0px 18px 0px lightgreen inset,
-8px -8px 18px 0px lightgreen inset,
5px 5px 15px 0px #888888;
３つの影を設定しています。
上から、「左辺と上辺の内側の薄緑の影」「右辺と下辺の内側の薄緑の影」「外側の灰色の影」となります。
border-radius: 30%/10%;
角丸を指定しています。
「/」で区切り、その前後に違う数値を指定すると、角の丸みが楕円状になり、前者の数値（30%）が楕円の横半径、後者の数値（10%）が楕円の縦半径、って事になります。
width: 100%;
height: 400px;
枠自体のサイズを指定しています。
padding: 28px;
枠の内側の余白を設定しています。
これを指定していないと、中の文字が枠に重なっちゃったりします^^;
あとがき
思いつきでやってみましたが、すんなりとbox-shadowがborder-radiusに合ってくれましたね^^
box-shadow も border-radius も、工夫次第でまだ色々な見せ方がありそうですが、併用すると更に可能性が広がりそうです！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
