一、CSS样式
此次为横向渐变,若需要纵向渐变,则将left|、right、toright删除即可。
.class1{
background: #86c7ff;
width: 100%;
font-size: 18px;
color: #5f84a8;
border: 1px #d7edff solid;
border-radius: 5px;
margin: 0px 0px 7px 0px;
box-shadow:5px 5px 10px gray;
background: -webkit-linear-gradient(left,#d7edff, #a7d6ff); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right,#d7edff, #a7d6ff); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right,#d7edff, #a7d6ff); /* Firefox 3.6 - 15 */
background: linear-gradient(to right,#d7edff, #a7d6ff); /* 标准的语法(必须放在最后) */}
.class2{
background: #fdd4b5;
width: 100%;
font-size: 18px;
color: #5f84a8;
border: 1px #e7daca solid;
border-radius: 5px;
margin: 0px 0px 7px 0px;
box-shadow:5px 5px 10px gray;
background: -webkit-linear-gradient(left, #e7daca, #ffc987); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #e7daca, #ffc987); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #e7daca, #ffc987); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, #e7daca, #ffc987); /* 标准的语法(必须放在最后) */}
二、Html
<div class="class1">
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</div>
<div class="class2">
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</div>
三、效果图
四、Box-shadow
外阴影:box-shadow: X轴 Y轴 Rpx color;
属性说明(顺序依次对应): 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色
内阴影:box-shadow: X轴 Y轴 Rpx color inset;
默认是外阴影 内阴影:inset 可以设置成内部阴影