最近、海外のブログで紹介されてから色々な処で追従して紹介されているテクニックで、２個のボックスで1pxのborder-radius（角丸）と同等の効果を表現すると云う技が有って‥。
1px面取り
1px面取り（ボーダー）
よく見ると角が1px欠けてる。divを二つネストして、外側のdivの左右に予めマージンを用意しといて、内側のdivを左右のネガティブマージン（マイナス値を指定したマージン）でその部分にはみ出させる事によって実現されてる。見た目の印象を柔らかくする為に使われる職人的テクニック。工業製品や家具に於ける面取り加工に近い考え。これならborder-radiusプロパティが未実装のIEやOperaでも使える。地味ながら、粋。コードは省略。
関係ないけど任天堂の社内は、無駄な空間を作らないように社内のソファーもテーブルも直角のものばかりで構成されていると聞いたことがある。そんな任天堂のソファーだって角は丸いはず。
だけどぱっと見で気づいてもらえないのも寂しいので、ちょっと台無しにしてみることにする(。-∀-)
1. ダブルボーダー角落とし
2. トリプルボーダー角落とし
3. カルテットボーダー角落とし
Ö _ Ö
5. 説明不能
6. 意味不明
7. 意味不明
8. ダブルボーダーの隙間にソリッドボーダー
9. ソリッドボーダーに内側のブロックの破線ボーダーを重ねる
台無し(。-∀-)ｂ
CSSを覚えたての頃によくこんな事して遊んだ気がする。一見すると使えそうに見える最初の三つは、ページズームでずれるので、細いボーダーでは使えなかったりする(´・ω・｀)
ネガティブマージンを使えば、ボーダーの線種と太さと色、そしてボックスの背景色を調整する事によって、ボックス２つで背景画像無しでも表現の可能性が拡がるような気がしなくもない(。-∀-)
新しい遊び道具かと思ったｗｗｗｗｗ
新しい遊び道具でも境界性人格障害の略称でもないぞ(･ω･)
おっちゃんは世間と自分の間のボーダーを何とかしたいです(。- ∀ -)ドーン
今年は金木犀のかほりを嗅がずに冬を迎えてしまった感が何とも寂しい限り。沖縄はまだロンT一枚だったりするのでしょうか。通信終わる(。｀-ω-´)ノ
ロンＴどころか半そでＴシャツですがｗｗｗｗ
なんたるユートピア(。-∀-)