目录

HTML5:七天学会基础动画网页4

backgorund-size

值与说明

length(单位像素) :设置背景图片高度和宽度,第一个值设置++宽度++ ,第二个值设置++高度++,如果只给出一个值,第二个是设置为auto。

percentage(百分比) :以父元素的百分比来设置背景图像的宽度和高度,第一个值设置++宽度++ ,第二个值设置++高度++,如果只给出一个值,第二个是设置为auto。

cover:把背景图片扩展至足够大,使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景特定区域中。

contain:把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

语法:

background-size 100px

100%(可以通过这个压缩图片) cover

contain

background-origin

值与说明

padding-box:背景图像相对于内边距框来定位

border-box:背景图像相对于边框盒来定位

content-box:背景图像相对于内容框来定位

background-clip

值与说明

padding-box:背景被裁剪到内边距框

border-box:背景被裁剪到边框盒

content-box:背景被裁剪到内容框

box-show盒子阴影

(给内容添加阴影,使其更加立体)

h-shadow:必须的值,水平阴影的位置,允许负值。

v-shadow:必须的值,垂直阴影的位置,允许负值。

blur:可选的值,模糊距离。

spread:可选的值,阴影的尺寸,外延值。

color:可选的值,阴影的颜色。

inset:可选的值,将外部阴影(outset)改为内部 阴影

语法:box-show:水平 垂直 模糊的尺寸 阴影的宽度 阴影颜色

我们来随便写一个鼠标放置产生阴影变化的例子:

<style>

*{

margin: 0;

height: 0;

}

.box{

width: 300px;

height: 500px;

border: 1px solid black;

margin: 60px auto;

}

.box:hover{

box-shadow: 47px 47px 12px 12px #999;

}

</style>

</head>

<body>

<div class="box"></div>

</body>

没有固定的参数,效果都是靠后期调整出来的。

这个盒子阴影的应用场景是很多的,这里以个小米的商城为例子

我们的鼠标放置后它会产生一个略微放大和阴影的效果,更有立体感。

今天就说这么多吧,说个题外话,最近OpenAI的sora不是火了吗,网上出来很多所谓AI讲师来卖课,不说百分之百其实也差不多了,都是出来割韭菜的,朋友们细心一点小心别被骗,如果有时间后面可以开一期讲这个,没有就算了,最后祝大家工作顺利,生活愉快。

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
林十一npc27 分钟前
【Web功能测试】Web商城搜索模块测试用例设计深度解析
前端·测试用例·web测试·搜索框·商城测试
小p30 分钟前
迈向全栈:服务器上的软件安装
前端·后端
凯哥197037 分钟前
Sciter.js 新手指南-GUI开发中的窗口使用指南
前端
Nuyoah.40 分钟前
《vue3学习手记3》
前端·javascript·vue.js·学习·前端框架
最新资讯动态1 小时前
首发即燃!《群星纪元》携手鲸鸿动能引领科幻热潮,打造爆款国产SLG手游
前端
涵信1 小时前
第五节:React Hooks进阶篇-如何用useMemo/useCallback优化性能
前端·javascript·react.js
BillKu1 小时前
reactive 解构赋值给 ref
前端·javascript·vue.js
岭子笑笑1 小时前
await-to-js 源码解读
前端
乐影1 小时前
React Native踩坑记录之——屏幕适配
前端·react native
JiangJiang1 小时前
🤯 Vue 人快上车!用 useContext 实现 Vuex 同款全局状态管理!
前端·react.js·面试