css字体的凹陷效果

html-css020

css字体的凹陷效果,第1张

ie没办法,用滤镜吧,给你个参考网址

http://blog.lanyue.com/view/61/716825.htm

这里面可能会有你想要的效果

在不同浏览器之间效果会不同,试试用下面这种写法

td.ao{text-shadow: 0px -1px #bbb,0 2px #fff}

<!--[if IE]>

td.ao{FILTER:写上你想要用的滤镜 }

<![endif]—>

原理:

用position的相对定位(relative)和绝对定位(absolute)

简单的例子:

<h3>文字<span>文字</span></h3>

h3{ position:relativecolor:#fff}

h3 span{ position:absolutetop:1pxleft:1pxcolor:#000}

大概就是这样的思路,具体细节你自己去调整。

<div>

    <p>Test</p>

</div>

<style>

div {

    width: 200px

    height: 200px

    background: #272727

    border: 1px #272727 solid

}

p {

    width: 158px

    line-height: 158px

    color: #fff

    text-align: center

    margin: 20px auto

    border-radius: 4px

    box-shadow: inset 0px 2px 8px 2px #000000

    border: 1px #666 solid

    border-left: 1px #131313 solid

    border-top: 1px #131313 solid

}

</style>

当圆角过大时深色边和高光边交界处会露陷,要不露陷的话:

边框渐变,貌似支持的浏览器少

不用边框,用两个div嵌套,外面那个比里面那个大1px,然后外面那个用45度的斜方向背景渐变(支持的浏览器多),里面那个用背景色加内阴影。