CSS如何实现内凹角效果

html-css010

CSS如何实现内凹角效果,第1张

给你一个好案例:

<!DOCTYPE html>    

<html lang="en">    

<head>    

<meta charset="utf-8">    

<style>    

body {    

        background-color: #ccc    

}    

div {    

color: #ccc    

font: 700 80px "微软雅黑"    

}    

div:first-child {    

/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色 */    

text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff    

}    

div:last-child {    

/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色 */    

text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff    

}    

</style>    

</head>    

<body>    

<div>我是凸起的文字</div>    

<div>我是凹下的文字</div>    

</body>    

</html>