elsyy良师益友的博客

web前端开发技术

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

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>



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_32609883/article/details/49906869
个人分类: html
想对作者说点什么? 我来说一句

qt模拟CSS3box-shadow效果

2015年07月14日 776KB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭