关闭

css3更易操作的网页细节-box-shadow阴影

141人阅读 评论(0) 收藏 举报
分类:

box-shadow的参数有六个:X轴偏移、Y轴偏移、阴影模糊半径、阴影扩展半径、阴影颜色、阴影类型。

x-offset:X轴偏移

阴影水平偏移量,其值可以是正负值,如果是正值则阴影在对象的右边,为负值则在左边。

y-offset:Y轴偏移

阴影上下偏移量,其值也可以为正负值,如果是正值,则阴影在对象的底部,为负值则在顶部。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px;}

</style>

</head>


<body>

<div class="box"></div>

</body>

</html>

阴影模糊半径

此参数可选,为0时阴影不具有模糊效果,其值越大阴影边缘也就越模糊

<style>

.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px;}

</style>

阴影扩展半径

此参数可选,其值为正值时,整个阴影面积都延展扩大,为负值时则缩小

<style>

.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px 20px;}

</style>


阴影颜色

此参数可选,如果不设定颜色,浏览器会取默认色,但各个浏览器默认取色不一样

<style>

.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px 20px green;}

</style>


阴影类型

此参数可选,如不设值,默认投影方式是外投影,如取其唯一值“inset”,则投影为内投影

<style>

.box{width:400px; height:400px; border: red solid 2px; margin:auto; box-shadow:20px 20px 30px 20px green inset;}

</style>



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:10234次
    • 积分:487
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论