overflow:hidden;してるのに、はみ出る #CSS珍百景

テクノロジーカテゴリーの変更を依頼記事元:

geckotang.tumblr.com

2 usersがブックマークコメント

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=http%3A%2F%2Fgeckotang.tumblr.com%2Fpost%2F106136237076%2Foverflowhidden%25E3%2581%2597%25E3%2581%25A6%25E3%2582%258B%25E3%2581%25AE%25E3%2581%25AB%25E3%2581%25AF%25E3%2581%25BF%25E5%2587%25BA%25E3%2582%258B-css%25E7%258F%258D%25E7%2599%25BE%25E6%2599%25AF" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="http://geckotang.tumblr.com/post/106136237076/overflowhidden%E3%81%97%E3%81%A6%E3%82%8B%E3%81%AE%E3%81%AB%E3%81%AF%E3%81%BF%E5%87%BA%E3%82%8B-css%E7%8F%8D%E7%99%BE%E6%99%AF">overflow:hidden;してるのに、はみ出る #CSS珍百景</a><a href="https://b.hatena.ne.jp/entry/geckotang.tumblr.com/post/106136237076/overflowhidden%E3%81%97%E3%81%A6%E3%82%8B%E3%81%AE%E3%81%AB%E3%81%AF%E3%81%BF%E5%87%BA%E3%82%8B-css%E7%8F%8D%E7%99%BE%E6%99%AF">はてなブックマーク - overflow:hidden;してるのに、はみ出る #CSS珍百景</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

overflow:hidden;してるのに、はみ出る #CSS珍百景

はい、[CSS珍百景 Calendar 2014](http://www.adventar.org/calendars/341) 25日目の記事です。途中書... はい、[CSS珍百景 Calendar 2014](http://www.adventar.org/calendars/341) 25日目の記事です。途中書いてませんが、25日の記事をとりあえず。親要素で **overflow:hidden;** を指定して、子要素に **-webkit-filter: blur(10px);** した時に、子要素のボケた部分が、親要素からはみ出てしまうアレです。これは、Safari 7.1.2や、iOS8.1のSafariで再現します。Chromeでは起きません。 ## 検証コード /*css*/ div { width: 100px; height: 100px; overflow: hidden; } div img{ -webkit-filter: blur(10px); } デモ1 デモ1をChromeで見た時のスクリーンショットです。次に