CSS美化DIV 背景渐变边缘立体化

最新推荐文章于 2025-04-14 20:30:08 发布

夕降巫咸

最新推荐文章于 2025-04-14 20:30:08 发布

阅读量9.8k

点赞数 8

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/Changeable0127/article/details/80883626

版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

一、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 可以设置成内部阴影