CSS3 边框属性、盒子阴影和盒子倒影实战：实现块元素边框和盒子模型效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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; border-radius:10px; padding: 5px;" />
</p>
<p>密 码</p>
<p>
<input name="" type="text" style="width:200px; height:20px; border-radius:10px; padding: 5px;" />
</p>
<p><a href="#"><img class="btn" src="images/reg.jpg" border="0" /></a> <a href="#"><img class="btn" src="images/foundp.jpg" border="0" /></a> <a href="#" class="bth"><img class="btn" src="images/login.jpg" border="0" /></a></p>
</div>
<pre><code><!-- 2.设置背景图片，边框图片 -->
<div id="bor">
</div>
<!--3.设置倒影 -->
<div id="text">
<h1>《雨巷》--- 戴望舒</h1>
<p>撑着油纸伞，独自<br />
彷徨在悠长、悠长<br />
又寂寥的雨巷<br />
我希望逢着<br />
一个丁香一样地<br />
结着愁怨的姑娘 </p>
</div>
<!-- 4，设置倒影 -->
<img id="fj" src="images/fj.jpg" />
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/nuEl 著作权归作者所有。请勿转载和采集!