美文网首页
CSS3 box-shadow 属性(阴影效果)

CSS3 box-shadow 属性(阴影效果)

作者: 筱筱2019 | 来源:发表于2019-03-10 16:17 被阅读0次

CSS3 box-shadow 属性(阴影效果)

语法:

box-shadow:inset x-offset y-offset blur-radius spread-radius color

  也就是:

对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} 

 取值:

  box-shadow属性至多有6个参数设置,他们分别取值:

阴影类型

  此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为“inset”时,其投影就是内阴影;

更详细的内容介绍参考:http://www.cnblogs.com/lhb25/archive/2013/03/08/css3-box-shadow.html ;

例:

<style>

.yy1{width:600px;height:200px;padding:10px;background:#FFF;border:1px solid #ddd;margin:0px auto;text-align:center;line-height:200px;box-shadow:10px 10px 5px #888888;}

.yy2{width:600px;height:200px;padding:10px;background:#FFF;border:1px solid #ddd;margin:50px auto;text-align:center;line-height:200px;}

.yy2:hover{position:relative;top:-10px;left:-10px;box-shadow:10px 10px 5px #888888;}

</style>

<br/>

<div class="yy1" >Hello word!</div>

<div class="yy2" >Hello word!</div>

相关文章

  • CSS3 box-shadow 属性(阴影效果)

    CSS3 box-shadow 属性(阴影效果) 语法: box-shadow:insetx-offset y-o...

  • css3知识点积累

    box-shadow属性 CSS3的box-shadow属性可以让我们轻松实s现图层阴影效果。下面来介绍一下该属性...

  • 第3章 CSS3边框-5

    3.5 CSS3盒子阴影属性 box-shadow用来定义元素的盒子阴影。 3.5.1 box-shadow属性的...

  • css3新增的属性

    css3新增属性:1,box-shadow(阴影效果)2,border-color(为边框设置多种颜色)3,bor...

  • CSS3新增属性

    CSS3新增属性用法整理:1、box-shadow(阴影效果)2、border-color(为边框设置多种颜色)3...

  • CSS3 基础(2)——文本效果和字体

    CSS3 文本效果 text-shadow 文本阴影 box-shadow 盒子阴影 text-overflow文...

  • box-shadow 效果大全

    box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)CSS3 box-sha...

  • CSS3 - `box-shadow`阴影

    CSS3 - box-shadow 阴影 CSS3中,利用box-shadow可以给一个盒模型添加阴影,包括内部阴...

  • CSS3基础

    CSS3基础 -- 边框 圆角效果 向元素添加圆角边框 阴影 box-shadow 向盒子添加阴影。支持一个或者...

  • React Native之阴影效果

    前言 阴影效果在App中是一个很常见的需求,在css3中可有直接通过box-shadow属性实现,RN中的iOS端...

网友评论

      本文标题:CSS3 box-shadow 属性(阴影效果)

      本文链接:https://www.haomeiwen.com/subject/fesuuqtx.html