效果图

.html部分

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>为网页元素添加阴影效果</title><link href="../2.css/03.为网页元素添加阴影效果.css" rel="stylesheet" type="text/css"></head><body><div id="pic"><img src="../4.img/133101.jpg" width="820" height="553" alt="" /></div></body>
</html>

.CSS部分

@charset "utf-8";/* CSS Document */
* {margin: 0px;padding: 0px;
}body {font-size: 12px;color: #333;line-height: 20px;background-color: #CCC;
}
/* box-shadow:none|[inset]? [<length>]{2,4} [<color>] *默认是外阴影,inset代表是内阴影*4个length分别表示阴影的水平偏移、垂直偏移、模糊距离和阴影大小,其中水平偏移和垂直偏移是必需的值,模糊半径和阴影大小可选*color设置阴影颜色(可选)*/
#pic {height: 553px;width: 820px;margin: 50px auto 0px auto;border: solid 8px #FFF;/* 没有设置阴影的类型,所以默认的阴影类型为外阴影 */box-shadow:  12px 12px 20px 60px #666;
}

Web前端开发-为网页元素添加阴影效果相关推荐

WEB前端开发简易网页制作
效果代码如下: 网页代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
html5web前段页面,HTML5+CSS3 Web前端开发
HTML5+CSS3 Web前端开发编辑锁定讨论上传视频 <HTML5+CSS3 Web前端开发>是2018年5月清华大学出版社出版的图书,作者是唐四薪.ISBN为97873024 ...
Web前端开发学习3：SEO代码优化
一代码优化概述关于代码优化的知识是纯理论的知识,学习的很枯燥.在学到CSS时,不免遇到CSS+div进行代码优化的知识,因此在网上看了一些关于这方面的知识,简单的整合一下,梳理自己所了解的代码优化 ...
参加web前端开发培训具体要学什么内容
学习web前端技术不是一天两天就能学会的,想要成为一名合格的web前端工程师,一定要进行系统的培训学习,那么下面小编就为大家详细的介绍一下参加web前端开发培训具体要学什么内容? 参加web前端开发培 ...
Web前端开发需要学习哪些知识
首先了解web前端 Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态的,用户使用网站的行为也以浏览为主. ...
web前端开发大学生自学学习线路图
web前端开发由网页制作演变而来,各种丰富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的.前端在飞速发展着.变革着,随之而来就是巨大的企业需求, ...
学习web前端开发，需要学习什么？
如果要学习web前端开发,需要学习什么? 遇到很多新手,都会问,如果要学习web前端开发,需要学习什么?难不难?多久能入门?怎么能快速建一个网站?工资能拿到多少?还有些让我推荐一些培训机构什么的要去学 ...
Web前端开发要掌握的技能有哪些？
Web前端开发由网页制作演变而来,随着Web2.0的发展,网页不再只是承载单一的文字和图片,各种丰富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现 ...
php前端开发培训,杭州web前端培训技术学校(web前端开发和php开发)
杭州web前端培训技术学校,选择的时候请记住杭州web前端培训中的web前端框架,web前端开发和ui设计,web前端开发和php开发,web前端开发好不好,学历低能否学习web前端,web适用那些人 ...
女孩子零基础学习web前端开发怎么…
· 网页开发工具: 学习web前端开发,网页开发工具有FrontPage,会用 Word 的人很容易学会FrontPage.还有一个常用的是Dreamweaver.这两种都是使用最多的HTML网页制 ...

Web前端开发-为网页元素添加阴影效果

效果图

.html部分

.CSS部分

Web前端开发-为网页元素添加阴影效果相关推荐

最新文章

热门文章