css3中的inset什么意思,起什么作用,如何使用?

html-css024

css3中的inset什么意思,起什么作用,如何使用?,第1张

CSS3 内阴影(inset)代码:

.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标签,此时成功将内容变更为了“改了”。