CSS 倒影效果实现：按钮、文字、图片的炫酷效果
<p>感谢您提供的代码和备注！根据您的需求，我已经补充了 CSS 样式和修改了 HTML 代码，实现了以下效果：</p>
<ol>
<li>设置了输入框的圆角边框样式；</li>
<li>设置了按钮的阴影效果；</li>
<li>设置了边框图片，并使用 'border-image' 属性进行边框图片的样式设置；</li>
<li>设置了文字的倒影效果，并使用 '-webkit-box-reflect' 属性实现；</li>
<li>设置了图片的倒影效果，并使用 '-webkit-box-reflect' 属性和 'linear-gradient' 属性实现。</li>
</ol>
<p>希望我的回答对您有帮助！以下是修改后的完整代码：</p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Reflections</title>
<style type="text/css">
body
{
height: 1500px;
}
.login{
width:241px;
background-color:#d2d2b4;
}
.login p{
margin:5px 0 5px 5px;
font-size:14px;
font-weight:700;
}
h1 { text-align: center; }
<pre><code>input{
border-radius:10px 10px 10px 10px
}
.bth:hover{
box-shadow: 1px green;
}
#bor{
height: 280px;
width: 280px;
border:solid 30px blue;
border-image:url(border.png) ;
border-image-slice: 33%;
border-image-repeat: repeat;
}
#text{
margin-bottom: 300px;
-webkit-box-reflect: below 10px;
border: solid 5px;
}
#fj{
margin-bottom: 300px;
-webkit-box-reflect: below 10px linear-gradient(0deg,rgba(0,0,0,1),rgba(0,0,0,0.5),rgba(0,0,0,0.8));
}
/*补充CSS样式*/
</code></pre>
</style>
</head>
<body>
<!--1.设置圆角边框，盒子阴影 -->
<div class="login">
<p>用户名</p>
<p>
<input name="" type="text" style="width:200px; height:20px;" />
</p>
<p>密 码</p>
<p>
<input name="" type="text" style="width:200px; height:20px;" />
</p>
<p><a href="#"><img class="btn" src="reg.jpg" border="0" /></a> <a href="#"><img class="btn" src="foundp.jpg" border="0" /></a> <a href="#"><img class="btn" src="login.jpg" border="0" /></a></p>
</div>
<pre><code><!-- 2.设置背景图片，边框图片 -->
<div id="bor">
<img src="goddess.jpg">
</div>
<!--3.设置倒影 -->
<div id="text">
<h1>《雨巷》--- 戴望舒</h1>
<p>撑着油纸伞，独自<br />
彷徨在悠长、悠长<br />
又寂寥的雨巷<br />
我希望逢着<br />
一个丁香一样地<br />
结着愁怨的姑娘 </p>
</div>
<!-- 4，设置倒影 -->
<img id="fj" src="fj.jpg" />
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/nuEs 著作权归作者所有。请勿转载和采集!