首页 > 代码库 > css样式的部分拓展, NuMber对象、 BoM、 DoM对象的模型的间述,ing...

css样式的部分拓展, NuMber对象、 BoM、 DoM对象的模型的间述,ing...

2024-08-22 09:59:54   218人阅读

技术分享

css部分代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7         div{
 8             width: 300px;
 9             height: 400px;
10             margin:100px auto;    
11             position: relative;/*相对定位*/
12             left:0px;
13             top:0px;
14             
15             /*对象选择器 box-shadow:[投影方式] X轴偏移量 Y轴偏移量模糊半径 阴影半径 颜色*/
16             box-shadow: 5px -1px 20px dimgray;
17         }
18         div img{
19             width: 300px;
20             height: 400px;
21         }
22         div:hover{
23             left: 5px;
24             top: -10px;
25             transition: all 1s;/*transition属性的过渡*/
26             opacity:0.8;/*改变img等元素的透明度  数值在0-1间  0是完全透明  1是不透明*/
27             
28             /*transform进行2D 3D间转换  scale(x,y) 对元素进行缩放 Y是一个可选参数,可以先填写一个参数  缩放宽高等比例缩放*/
29             transform:scale(1.02); 
30             /*进行旋转 deg 角度*/
31             /*transform:rotate(100deg);*/
32             /*进行X Y轴倾斜  deg角度*/
33             /*transform:skew(1deg,2deg);*/
34         }
35         </style>
36     </head>
37 <body>
38     <div><img src="http://www.mamicode.com/img/kouhong.jpg"></div>
39 </body>
40 </html>

效果图

技术分享

 

css样式的部分拓展, NuMber对象、 BoM、 DoM对象的模型的间述,ing...


联系
我们