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

原创 2015年11月18日 14:39:18

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>



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

css3中的box-shadow(阴影)使用说明和兼容性问题

CSS3 box-shadow 属性讲解: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:阴影水平偏移的距离,...

css3阴影box-shadow使用个人笔记

基本语法:box-shadow: inset h-shadow v-shadow blur spread color; inset:可选。将外部阴影 (outset) 改为内部阴影。 h-shado...

CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inse...

CSS3阴影 box-shadow的使用详解

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[in...

CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[in...

css3盒子阴影box-shadow 设置

定义:box-shadow 属性向框添加一个或多个阴影。 支持:IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。 语法...

css3阴影box-shadow

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[in...

CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inse...

CSS3阴影 box-shadow的使用和技巧总结

1.text-shadow是给文本添加阴影效果, 2.box-shadow是给元素块添加周边阴影效果。     随着html5和CSS3的普及,这一特殊效果使用越来越普遍。    基本语法是{b...

CSS3阴影 box-shadow的使用和技巧总结

原创地址:http://blog.csdn.net/freshlover/article/details/7610269 text-shadow是给文本添加阴影效果,box-shadow是给...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)