css zoom 属性

最新推荐文章于 2024-03-21 17:09:16 发布

原创最新推荐文章于 2024-03-21 17:09:16 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #XHTML #HTML #脚本 #C

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了 CSS 中的 zoom 属性及其用法。包括 zoom 的基本语法、取值方式及如何影响页面元素的缩放比例。并通过实例展示了如何在 HTML 文档中应用 zoom 属性来调整元素大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本语法zoom : normal | number
语法取值normal :　默认值。使用对象的实际尺寸number :　百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值使用说明

设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承，但是它会影响对象的所有子对

象( children )。这种影响很像 background 和 filter 属性导致的变化。此属性对于 currentStyle 对象而言是只读的。对于视频对象而言是可读写的。对应的脚本特性

为 zoom 。代码示例
1 div {zoom : 0.75; }
2 .clsTeenyWeeny { zoom: 0.10 }

范例：

a{ /* 统一设置所有样式 */

font-family: Arial;

font-size: .8em;

text-align:center;

margin:3px;

}

a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */

color:

#A62020;

padding:4px 10px 4px 10px;

background-color: #ecd8db;

text-decoration: none;

border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */

border-left: 1px solid #EEEEEE;

border-bottom: 1px solid #717171;

border-right: 1px solid #717171;

}
a:hover{ /* 鼠标经过时的超链接 */

color:#821818; /* 改变文字颜色 */

padding:5px 8px 3px 12px; /* 改变文字位置 */

background-color:#e2c4c9; /* 改变背景色 */

border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */ border-left: 1px solid #717171;

border-bottom: 1px solid #EEEEEE;

border-right:1px solid #EEEEEE; }
</style>

</head>
<body>
<a href="#">首页</a> <a href="#">课件</a> <a href="#">教案</a> <a href="#">试卷</a> <a href="#">图库</a> <a href="#">视频

</a>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------
-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
--------------------------------------------------------------------------------------------------------------------------------------------------
添加zoom后：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<style type="text/css">
a { /* 统一设置所有样式 */
    font-family: Arial;
    font-size: .8em;
    text-align:center;
    margin:3px;
    zoom:1;
}
a:link, a:visited { /* 超链接正常状态、被访问过的样式 */
    color: #A62020;
    padding:4px 10px 4px 10px;
    background-color: #ecd8db;
    text-decoration: none;
    border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */
    border-left: 1px solid #EEEEEE;
    border-bottom: 1px solid #717171;
    border-right: 1px solid #717171;
}
a:hover { /* 鼠标经过时的超链接 */
    color:#821818; /* 改变文字颜色 */
    padding:5px 8px 3px 12px; /* 改变文字位置 */
    background-color:#e2c4c9; /* 改变背景色 */
    border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */
    border-left: 1px solid #717171;
    border-bottom: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
}
</style>
</head>
<body>
<a href="#">首页</a> <a href="#">课件</a> <a href="#">教案</a> <a href="#">试卷</a> <a href="#">图库</a> <a href="#">视频

</a>
</body>
</html>