.shadow {
-moz-box-shadow:inset 0 0 10px #000000
-webkit-box-shadow:inset 0 0 10px #000000
box-shadow:inset 0 0 10px #000000
}
CSS3 box-shadow 代码说明
inset 0 0 10px #000000含义如下
1. inset: 内投影
2. 水平方向偏移量
3. 垂直方向偏移量
4. 模糊半径值
可以使用以下几种方式:
1、相对定位方式,设置图片的position属性为relative,然后设置left top属性为负数,做到显示中间区域,外层标签要设置overflow属性为hidden不然会撑大。
2、把图片当做背景使用,然后设置背景居中或者手工填写位置。
3、使用图片margin属性,外层标签要设置overflow属性为hidden不然会撑大。
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>图片</title>
<style>
.div1{
width:300px
height:400px
border:1px solid #4EC83B
overflow: hidden
}
.div1 img {
position: relative
left: -100px
top: -150px
}
</style>
</head>
<body>
<div style="float:leftmargin:10px">
第一种
<div class="div1">
<img src="img1.jpg" width="500" height="700" alt="" />
</div>
</div>
<div style="float:leftmargin:10px">
第二种
<div style="width:300pxheight:400pxbackground-image:url(img1.jpg)background-repeat: no-repeatbackground-position:center centerborder:1px solid #4EC83B">
</div>
</div>
<div style="float:leftmargin:10px">
第三种
<div style="width:300pxheight:400pxborder:1px solid #4EC83B overflow: hidden">
<img src="img1.jpg" width="500" height="700" style="margin:-150px -100px" />
</div>
</div>
</body>
</html>
效果如下:
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<script>标签中,输入js代码:
$('#open').click(function () {$(this).text('改了')})
3、浏览器运行index.html页面,点击a标签,此时成功将内容变更为了“改了”。