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讲师来卖课,不说百分之百其实也差不多了,都是出来割韭菜的,朋友们细心一点小心别被骗,如果有时间后面可以开一期讲这个,没有就算了,最后祝大家工作顺利,生活愉快。

相关推荐
Lsx_1 分钟前
TypeScript 是怎么去查找类型定义的?
前端·javascript·typescript
xianxin_12 分钟前
CSS Dimension(尺寸)
前端
小宋搬砖第一名13 分钟前
前端包体积优化实战-从 352KB 到 7.45KB 的极致瘦身
前端
陈随易13 分钟前
前端之虎陈随易:2025年8月上旬总结分享
前端·后端·程序员
草巾冒小子18 分钟前
天地图应用篇:增加全屏、图层选择功能
前端
universe_0136 分钟前
day25|学习前端js
前端·笔记
Zuckjet41 分钟前
V8 引擎的性能魔法:JSON 序列化的 2 倍速度提升之路
前端·chrome·v8
MrSkye41 分钟前
🔥React 新手必看!useRef 竟然不能触发 onChange?原来是这个原因!
前端·react.js·面试
wayman_he_何大民1 小时前
初识机器学习算法 - AUM时间序列分析
前端·人工智能
juejin_cn1 小时前
前端使用模糊搜索fuse.js和拼音搜索pinyin-match提升搜索体验
前端