ホームページ >ウェブフロントエンド >htmlチュートリアル >css3_html/css_WEB-ITnoseで実装した描画グラフィックパターンエフェクトコードの例
css3_html/css_WEB-ITnoseで実装した描画グラフィックパターンエフェクトコードの例
- WBOYオリジナル
- 2016-06-24 11:28:41914ブラウズ
css3 で実装されたグラフィックスとパターン効果を描画するためのコードの例:
css2 を使用してグラフィックスとパターンを描画する場合、それはほとんど不可能、または多大な労力をかけて非常に単純なパターンしか取得できません。 css3 を使用すると、グラフィックスの目的を実現することができます。必要な場合は、その実装を参照してください。
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><head><style type="text/css">div{ width:170px; height:140px; background-image: radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%), linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%), radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%), radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), linear-gradient(to bottom, #ef0015 20%, #b2000c 100%); border-radius:140px 140px 80px 80px; } </style></head><body><div></div></body></html> 元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=15389
詳細については、次を参照してください: http:// www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。